tdテーブルのjQuery自動インクリメント番号

Question

jQueryを使用して新しい行を追加した場合、インクリメント番号をtableに追加するにはどうすればよいですか？ここで

<table> 
    <th>No.</th> 
    <th>Name</th> 

    <tr> 
    <td>1</td> 
    <tr> 
    <td>2</td> 
</table> 

は

var num = 1; 
$('table').prepend('<tr><td align="center" class="number">'+(num+1)+'</td><td>'+jsonStr.departmentName+'</td></tr>'); 

新しい行を追加するためのコードは、だから、追加された新しい行が一番上に表示されています。前 ：

No | Name 
1 | David 
2 | Mark 

新しい行を追加した後：

No | Name 
auto | based on added 
2 | David 
3 | Mark 

Answer 1

ことによってそれを増加させることによってIdを解決それは数を操作することが容易となる後

<table> 
    <thead> 
     <th>No.</th> 
     <th>Name</th> 
    </thead> 
    <tbody> 
     <tr> 
     <td class="center number">1</td> 
     <td>David</td> 
     </tr> 
     <tr> 
     <td class="center number">2</td> 
     <td>Mark</td> 
    </tr> 
    </tbody> 
</table> 

：あなたはあなたのタスクを容易にするために少しをあなたのhtml作業することができ

あなたが今持っているもので何が起こっているのか

var jsonStr = { 
    departmentName : "Sales" 
}; 
var newrow = $('<tr><td class="center number"></td><td>'+jsonStr.departmentName+'</td></tr>'); 
$("tbody").prepend(newrow); 

$("td.number").each(function(i,v) { 
    $(v).text(i + 1); 
}); 

デモ https://jsfiddle.net/w7csmhwk/

Answer 2

をあなたが最初のように隠されたタイプの1つの入力フィールドを作成し、その隠された入力のようにAであなたの行番号を保存することを行いたい場合値

<input type="hidden" name="rowNum" value=""> 

そして最後に、あなたはこの

のようにjQueryのことで、その値を変更するjQueryのthroughtの行を追加するたびに

$('rowNum').val("your latest row") 

と既存の行の行番号をすべて修正した後、挿入し、既存の行について知っておく必要があるでしょう、あなたの行

Answer 3

ファーストの値を設定します：

// Find existing rows first 
var $trs = $('table').children("tr"); 

// Then do your prepend/insert, I'm assuming your first row always get the value of 1 
$('table').prepend('<tr><td align="center" class="number">1</td><td>'+jsonStr.departmentName+'</td></tr>'); 

// Then update all the existing values 
$trs.each(function (index) { 
    var $tdNumber = $(this).first("td.number"); 
    $tdNumber.text(index + 2 /* Offset by the number of rows inserted plus 1 to make it ordinal */); 
}); 

Answer 4

$(document).ready(function(){ 
 
    $(".btnAdd").click(function(){ 
 
    
 
    $("table tr").each(function(){ 
 
     var tr=$(this); 
 
     var ftd=tr.find("td:first"); 
 
     var std=tr.find("td:last"); 
 
     var tmpvalue=parseInt(ftd.text()); 
 
     tr.html("<tr><td>"+(tmpvalue+1)+"</td><td>"+std.text()+"</td></tr>"); 
 
    }); 
 
    $("table").prepend("<tr><td>1</td><td>Michael</td></tr>"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>David</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td>Roy</td> 
 
    </tr> 
 
</table> 
 
<input type="button" class="btnAdd" value="Add" />

メインロジックがなければならない、

1 - 挿入された新しいレコードは常にナンバー1になりますので、あなたは、静的に最初のTD

2に1を置くことができます - 各trを反復処理し、その後1