使用jQuery在td元素中为水平连接的行垂直对齐数据

Question

I've html in the below format. 我有以下格式的html。

<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>

<script type="text/javascript">
     $(document).ready(function(){
         var dups = $('.comps + .comps');
         dups.remove();
     });     
     var list1 = [1,2,3,4,5,6];
     var list2 = [6,5,4,3,2,1];
</script>

<div class="serverSet">
  <h2>JH Storefront servers</h2>
  <table border="1" class="CSSTableGenerator" class="myTable">
    <tr>
      <th>Component</th>
      <th>Properties</th>
      <th class="servers"> lqwasc10 </th>
      <th class="servers"> lqwasc11 </th>
    </tr>
    <tr>
      <td class="comps">DeliveryMethodsRepository</td>
      <td class="props">externalCacheBatchInfoSize</td>
    <tr/>
    <tr/>
      <td class="comps">InventoryManager</td>
      <td class="comps">InventoryManager</td>
      <td class="props">itemType</td>
    </tr>
    <tr>
      <td class="comps">InventoryManager</td>
      <td class="props">maxConcurrentUpdateRetries</td>
    </tr>
    <tr>
      <td class="comps">CatalogTools</td>
      <td class="comps">CatalogTools</td>
      <td class="props">queryASAFFabrics</td>
    </tr>
    <tr>
      <td class="comps">CatalogTools</td>
      <td class="props">loggingDebug</td>
    </tr>
    <tr>
      <td class="comps">CatalogTools</td>
      <td class="props">outOfStockCode</td>
    </tr>
    <tr>
  </table>
</div>

In the above jquery function, list1 and list2 are horizontally connected to lqwasc10 and lqwasc11 respectively. 在上面的jquery函数中， list1和list2分别水平连接到lqwasc10和lqwasc11 。 Is there a way I can align list1 and list2 vertically along with existing td elements of Components and Properties in their respective orders. 有没有一种方法可以将list1和list2以及Components和Properties现有td元素按其各自的顺序垂直对齐。

I've tried a lot and couldn't get hold of the logic. 我已经尝试了很多，却无法掌握逻辑。 It would be great if someone can answer. 如果有人可以回答，那就太好了。

I'm expecting data in the format as shown in the screenshot. 我希望数据以屏幕截图所示的格式显示。

Answer 1

You can merely add the desired <td> s just after removing duplicates, like this: 您只能在删除重复项之后添加所需的<td> ，如下所示：

 var list1 = [1,2,3,4,5,6]; var list2 = [6,5,4,3,2,1]; $(document).ready(function(){ $('.comps + .comps').remove(); $('.myTable tr').each(function(i) { if (i > 0) { $(this) .append('<td>' + list1[i - 1] + '</td>') .append('<td>' + list2[i - 1] + '</td>'); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="serverSet"> <h2>JH Storefront servers</h2> <table border="1" class="myTable"> <tr> <th>Component</th> <th>Properties</th> <th class="servers"> lqwasc10 </th> <th class="servers"> lqwasc11 </th> </tr> <tr> <td class="comps">DeliveryMethodsRepository</td> <td class="props">externalCacheBatchInfoSize</td> </tr> <tr> <td class="comps">InventoryManager</td> <td class="comps">InventoryManager</td> <td class="props">itemType</td> </tr> <tr> <td class="comps">InventoryManager</td> <td class="props">maxConcurrentUpdateRetries</td> </tr> <tr> <td class="comps">CatalogTools</td> <td class="comps">CatalogTools</td> <td class="props">queryASAFFabrics</td> </tr> <tr> <td class="comps">CatalogTools</td> <td class="props">loggingDebug</td> </tr> <tr> <td class="comps">CatalogTools</td> <td class="props">outOfStockCode</td> </tr> </table> </div>

Please note that this snippet works only after correcting HTML errors: <tr> inconsistency (already noticed by comments), duplicate class attribute on <table> . 请注意，此代码段仅在更正HTML错误后才有效： <tr>不一致（已经被注释注意到）， <table>上的class属性重复。

使用jQuery在td元素中为水平连接的行垂直对齐数据

问题描述

1 个解决方案

解决方案1
0 2016-09-10 16:03:56

使用jQuery在td元素中为水平连接的行垂直对齐数据

问题描述

1 个解决方案

解决方案1 0 2016-09-10 16:03:56

解决方案1
0 2016-09-10 16:03:56