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

你可以稍微设计你的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/

Answer 2

如果您希望这样做，那么首先创建一个类型为隐藏的输入字段，并将该隐藏输入的行号存储为值

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

最后，每当你通过jQuery添加行时，通过jQuery改变它的值，就像这样

 $('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

＆＃13;

$(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>");
  });
});

＆＃13;

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

＆＃13;

主要逻辑应该是，

1 - 插入的新记录将始终为数字1，因此您可以静态地将1添加到第一个td

2 - 遍历每个tr，然后将Id加一个

来结算

#!/bin/bash

VAR1="$(grep bob /etc/passwd && grep bob /etc/group)"
VAR2="$(grep henry /etc/passwd && grep henry /etc/group)"

if [ "$VAR1" ]; then
  echo "$VAR1"
elif [ "$VAR2" ]; then
  echo "$VAR2"
else
  echo "The user entered is invalid"
fi

Answer 5

var jsonStr = {
    departmentName : "Sales"
};

此代码段在此代码中是什么意思：

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

td表上的jQuery自动增量编号

5 个答案: