如何使用Javascript自动输入html中行的序列号

How to auto increament serial number of row in html using Javascript

本文关键字：序列号 html 输入 何使用 Javascript      更新时间：2023-09-26

我正在尝试添加表行。我无法添加新添加的行的序列号。即我必须在添加行时显示序列号自动递增。

<SCRIPT language="javascript">
        function addRow(dataTable) {
 var table = document.getElementById('dataTable');
             var rowCount = table.rows.length;
            var row = table.insertRow(2);
                var colCount = table.rows[3].cells.length;
                for(var i=0; i<colCount; i++) {
                    var newcell = row.insertCell(i);
                    newcell.innerHTML = table.rows[3].cells[i].innerHTML;
            }

    </SCRIPT>

知道吗？请帮忙

addCells(table, rows, cells);

  • table：一个字符串，表示目标表的 id。
    • 前任。 addCells('dataTable',...)
  • 行：要追加到目标表的行数的整数。
    • 前任。 addCells('dataTable', 4, ...)
    • 单元格
  • ：每行单元格数的整数。
    • 前任。 addCells('dataTable', 4, 5)

每行和单元格都分配有一个唯一的 id，这是模式：

  • 行： table id +R+ row position
    • 前任。 #dataTableR3 = 第 4 行#dataTable
  • 单元格：table id +R+ row position +C+ cell position
    • 前任。 #dataTableR3C7 = 第 4 行#dataTable的第 8 个单元格

请注意数字中的偏移量。这是因为 id 系统是 0 计数(以 0 开头作为第一个数字(。检查开发工具 - 控制台以查看所有生成的 ID。

这是jQuery版本，来自这个类似的问题。我不认为它是重复的，因为您的问题更具体地说明了前面提到的问题的某个方面。

var btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function(e) {
  var inp0 = document.getElementById('inp0').value;
  var inp1 = document.getElementById('inp1').value;
  var inp2 = document.getElementById('inp2').value;
  addCells(inp0, inp1, inp2);
}, false);
function addCells(table, rows, cells) {
  var T = document.getElementById(table);
  var R = parseInt(rows);
  var C = parseInt(cells);
  for (var i = 0; i < R; i++) {
    var row = document.createElement('tr');
    T.appendChild(row);
    row.setAttribute('id', table + 'R' + i);
    console.log('Appended row: ' + table + 'R' + i);
    for (var j = 0; j < C; j++) {
      var cell = document.createElement('td');
      row.appendChild(cell)
      cell.setAttribute('id', table + 'R' + i + 'C' + j);
      console.log('Appended cell: ' + table + 'R' + i + 'C' + j);
    }
  }
}
fieldset {
  margin: 20px;
}
table {
  border: 3px double blue;
  table-layout: fixed;
}
td {
  border: 1px solid red;
  width: 20px;
  height: 20px
}
<fieldset>
  <legend>Enter Table ID, Number of Rows, &amp; Number of Cells per Row</legend>
  <label for="inp0">Table</label>
  <input id="inp0" />
  <br/>
  <label for="inp1">Rows</label>
  <input id="inp1" />
  <br/>
  <label for="inp2">Cells</label>
  <input id="inp2" />
  <br/>
  <button id="btn1">Enter</button>
</fieldset>
<table id="t">
  <tr>
    <td>Table</td>
    <td>ID</td>
    <td>is</td>
    <td>t</td>
    <td>&nbsp;</td>
  </tr>
</table>
<table id="u">
  <caption>Table ID: u</caption>
</table>

相关文章：