Question

我有一个jquery脚本，它返回表中的行数，然后在<td>标记内设置该数字。

<tr>
 <td id = "jquery">

 </td>
 <td>
  <%= f.text_field :data1 %>
 </td>
 <td>
  <%= f.text_field :data2 %>
 </td>
  <td>
  <%= f.text_field :data3 %>
 </td>
</tr>
<script>
    var rowCount = $('#myTable tr').length
    $("#jquery").html(rowCount);    
</script>

此脚本有效但当我再次渲染此视图以向myTable添加另一行时，它只更新第一行而不是rowCount的下一行。任何想法如何解决这个问题？

Answer 1

您再次添加相同的行，因此在这种情况下将有2 tr与jquery具有相同的id 它只选择具有给定ID的第一个元素。

因此，而不是id提供class =＆＃34; jquery＆＃34;然后运行脚本：

 <td class= "jquery">

和

<script>
   $('tr').each(function(){
     var index= $('table').children('tr').index($(this))
     var position= index+1;
     $(this).children('td').first().html(position);
  })
</script>

Answer 2

使用此代码而不是仅设置id jquery的第一个元素的当前代码。

如果你想让每个第一个td有总数：

var count = $("#mytable tr").length;
$("#mytable tr > td:first-child").html( count );

每个第一个td都有行索引号

$("#mytable tr").each(function(){
   $(this).children("td").first().html( $(this).index() );
});

上面可能会有一个较短的链，但我现在想不到一个。如果你想要一个非零的起始索引，只需使用.index()+1。

JSFiddle Demo

用jquery更新html表行

2 个答案: