jQuery在td表上的自動增量編號

如果在使用jQuery添加新行時在table上添加增量編號？jQuery在td表上的自動增量編號

<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

來源

2017-02-09 HiDayurie Dave

什麼是你現在有什麼事？ – guradio

通過遞增解決Id你可以找出你的HTML一點點緩解你的任務：

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

之後操作的數量變得容易：

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/

來源

2017-02-09 04:32:14

太棒了，它工作完美。謝謝 –

如果你想這樣做，那麼首先創建一個輸入字段類型隱藏這樣和存儲你行數量上隱藏的輸入作爲一個值

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

最後只要添加一行throught jQuery的改變的jQuery它的價值這樣

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

get和set你行

來源

2017-02-09 04:13:04

首先你需要了解的以前存在的行中的值，然後再插入，然後糾正所有的行號爲現有行：

// 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 */); 
});

來源

2017-02-09 04:15:51 Reddog

嗨，只是試了一下代碼。下一行不更新號碼。 –

$(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，這樣你就可以靜態地1第一個TD

2 - 通過每個tr迭代，然後通過一個

來源

2017-02-09 04:26:25 Hemal

jQuery在td表上的自動增量編號

回答

相關問題