html表格点击增加一行的时候,能让这一行的每个单元格的id自动增加4个数字吗
时间: 2024-10-01 10:05:23 浏览: 29
自动增加删除表格行代码(纯JS)
4星 · 用户满意度95%
在HTML中创建动态表格并在用户点击增加行时自动生成递增ID的思路通常是结合JavaScript或者jQuery来实现。你可以使用`innerHTML`添加新行,并设置每个单元格的`id`。这里是一个简单的示例:
```html
<table id="dynamicTable">
</table>
<button onclick="addRow()">增加一行</button>
<script>
function addRow() {
var table = document.getElementById("dynamicTable");
var newRow = '<tr>';
// 创建新的单元格并分配递增的id
for (var i = 0; i < 5; i++) { // 假设我们有5个单元格
newRow += `<td id="cell-${(i+1)*4}"></td>`; // id每次加4
}
newRow += '</tr>';
table.innerHTML += newRow;
}
</script>
```
在这个例子中,每当你点击按钮,就会生成一个新的表格行,其中每个单元格的`id`会从`cell-4`开始,每次增加4。例如,第一个单元格的`id`将是`cell-4`, 第二个是`cell-8`, 等等。
阅读全文