如何添加自动编号表行？

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>