Question

我有一个包含多行的表格。我尝试在每一行的每五个元素中添加一些内容。我面临的问题是每一行或每个单元都没有类名或ID。所以我尝试的是首先将类名添加到第五个元素并附加新内容。这有效，但现在每五个元素中显示相同的内容。我做错了什么？

注意：必须放在第五个元素中的数据来自模板引擎，这对于这个问题并不重要。

HTML（缩写为可读性）

   <table>
    <tr>
     <td>.... some content....</td>
     <td>.... some content....</td>
     <td>.... some content....</td>
     <td>.... some content....</td>
     <td width="10%" class="gui-align-right">
      <span class="gui-nowrap 0">....data from script below....</span><br>
      <span class="gui-nowrap value 0">....data from script below....</span>
     </td>
     <td width="10%" class="gui-align-right">
       <span class="gui-nowrap">....data from script below....</span>
     </td>
    </tr>
    <tr>
     <td>.... some content....</td>
     <td>.... some content....</td>
     <td>.... some content....</td>
     <td>.... some content....</td>
     <td width="10%" class="gui-align-right">
      <span class="gui-nowrap 1">....data from script below....</span><br>
      <span class="gui-nowrap value 1">....data from script below....</span>
     </td>
     <td width="10%" class="gui-align-right">
       <span class="gui-nowrap">....data from script below....</span>
     </td>
    </tr>
   </table>

JQUERY

<script>
  var counter = 0;
   $('tr td:nth-child(5)').each(function() {
     var targetClass= counter++;
     $(this).html('<span class="gui-nowrap '+targetClass+'">{{ price }}</span><br/>
     <span class="gui-nowrap value '+targetClass+'">+ {{ value.price }}</span>').appendTo(targetClass);
   });
 </script>

附加到自动生成的表中的正确行

0 个答案: