Question

我的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>

在上面的jquery函数中，list1和list2分别水平连接到lqwasc10和lqwasc11。有没有一种方法可以将list1和list2与td和Components的现有Properties元素在各自的订单中垂直对齐。

我已经尝试了很多，无法掌握逻辑。如果有人能回答，那就太好了。

我期待的数据格式如截图所示。

Answer 1

您只需在删除重复项后添加所需的<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>

请注意，此代码段仅在更正HTML错误后才有效：<tr>不一致（注释已经注意到），class上的重复<table>属性。

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

1 个答案: