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表上的自动增量编号

回答

相关问题