Обновление строки таблицы html с jquery

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.

Таким образом, вместо идентификатора обеспечивают класс = «JQuery», а затем запустить скрипт:

<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

Используйте вместо текущего кода необходимо, что только устанавливает первый элемент от идентификатора 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