在列A和列B后面增加输入框, 每增加一行, 都会增加列A和列B的名称以及其输入框
时间: 2024-04-08 21:29:27 浏览: 15
如果你想在每一行的列A和列B后面增输入框,并且每一行都显示列名你可以修改上面的代码。以下是修改的示例代码:
```jsp
<!DOCTYPE html<html>
<head>
<>动态添加行</title>
</head>
<body>
<table id="my">
<tr>
th>列A</>
<th>列B</th>
<th></th>
</tr>
</>
<button onclick="addRow()">增加</button>
<button onclick="deleteRow()">删除行</button>
<script>
var counter = 0;
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1); // 在表格末尾插入新行
var cell1 = row.insertCell(0); // 插入第一列
var cell2 = row.insertCell(1); // 插入第二列
var cell3 = row.insertCell(2); // 插入删除按钮列
counter++;
cell1.innerHTML = '<input type="text" name="columnA' + counter + '">'; // 每个输入框名称唯一
cell2.innerHTML = '<input type="text" name="columnB' + counter + '">'; // 每个输入框名称唯一
cell3.innerHTML = '<input type="checkbox">';
}
function deleteRow() {
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
for (var i = rowCount - 1; i > 0; i--) {
var row = table.rows[i];
var checkbox = row.cells[2].getElementsByTagName("input")[0];
if (checkbox.checked) {
table.deleteRow(i);
}
}
}
</script>
</body>
</html>
```
这段代码会在每一行的列A和列B后面增加输入框,并且每一行都显示列名。每次增加一行时,输入框的名称会根据counter的值自动增加,以保证每个输入框名称唯一。你可以根据需要对这段代码进行调整和修改。