Question

就我而言，我的HTML和javascript：

$('.addRow').on('click', function() {
  addRow();
});

function addRow() {
  var tr = '<tr>' +
    '<td></td>' +
    '</tr>';
  $('tbody').append(tr);
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
  <thead>
    <th>No.</th>
    <th style="text-align:center"><a href='#' class="addRow"><i class="glyphicon glyphicon-plus"></i></a></th>
  </thead>
</table>

我想这样做

1

2

3

............

Answer 1

您可以使用css计数器

检查以下代码段

$('.addRow').on('click', function() {
  addRow();
});

function addRow() {
  var tr = '<tr>' +
    '<td>hello</td>' +
    '</tr>';
  $('table tbody').append(tr);
};

tbody {
  counter-reset: row;
  /* Set the row counter to 0 */
}

tbody tr::before {
  counter-increment: row;
  /* Increment the row counter*/
  content: counter(row) ": ";
  /* Display the row */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
  <thead>
    <th>No.</th>
    <th style="text-align:center"><a href='#' class="addRow">AddRow</a></th>
  </thead>
  <tbody></tbody>
</table>

Answer 2

试试这个：

var i = 1;

function addRow() {
  var tr = '<tr>' +
    '<td>' + i + '.</td>' +
    '</tr>';
  $('tbody').append(tr);
  i++;
};

Answer 3

在函数外部定义一个变量（下例中的i），然后在每次追加后递增变量。

var i = 1;

$('.addRow').on('click', function() {
  addRow();
});

function addRow() {
  var tr ='<tr>'+
         '<td>'+ i +'.</td>'+
         '</tr>';
  $('tbody').append(tr);
  i++;
};

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
    <thead>
            <th>No.</th>
            <th style="text-align:center"><a href='#' class="addRow"><i class="glyphicon glyphicon-plus"></i></a></th>
    </thead>
    <tbody></tbody>
</table>

Answer 4

您的HTML，您需要添加 tbody

<table id="example1" class="table table-bordered">
  <thead>
    <th>No.</th>
    <th style="text-align:center">
      <a href='#' class="addRow"><i class="glyphicon glyphicon-plus"></i></a>
    </th>
  </thead>
  <tbody>

  </tbody>
</table>

然后你的脚本：

$('.addRow').on('click', function() {
  addRow();
});
//Define row number
var rowNum = 1;
function addRow() {
  var tr = '<tr>' + '<td>' + rowNum + '</td>' + '</tr>';
  $('tbody').append(tr);
  rowNum++;
};

Answer 5

以下是一个工作示例：https://jsfiddle.net/o46asuyb/1/

您希望拥有一个全局变量来跟踪您当前所在的行：

var row = 1;
function addRow() {
  var tr='<tr>'+
         '<td>'+ (row) + '. </td>'+
         '</tr>';
  row++;
  $('tbody').append(tr);
}

$('.addRow').on('click', function() {
    addRow();
});

Answer 6

您的代码有两个问题。首先，您实际上并没有拥有一个<tbody>元素，因此您无需附加任何内容。其次，您需要使用一个循环来增加要显示的数字。

这是一个工作样本：

$('.addRow').on('click', function() {
  addRow();
});

var i = 1;

function addRow() {
  var tr = '<tr>' +
    '<td>' + i + '</td>' +
    '</tr>';
  $('tbody').append(tr);
  i++;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
  <thead>
    <th>No.</th>
    <th style="text-align:center"><a href='#' class="addRow">Add Row</a></th>
  </thead>
  <tbody>

  </tbody>
</table>

希望这有帮助！：）

如何添加自动编号表行？

6 个答案: