从两个下拉列表中添加一行到表中,并在选择时删除的实现方法如下:
<table id="myTable">
<thead>
<tr>
<th>选项1</th>
<th>选项2</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
</table>
<select id="select1">
<option value="1">选项1-1</option>
<option value="2">选项1-2</option>
<option value="3">选项1-3</option>
</select>
<select id="select2">
<option value="A">选项2-A</option>
<option value="B">选项2-B</option>
<option value="C">选项2-C</option>
</select>
<button onclick="addRow()">添加行</button>
rowCount
用于记录表格中的行数。然后,编写addRow()
函数来添加行。该函数会获取两个下拉列表的选中值,并将其添加到表格的新行中。最后,为新行添加一个删除按钮,并绑定deleteRow()
函数来实现删除功能。示例代码如下:var rowCount = 0;
function addRow() {
var table = document.getElementById("myTable");
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var newRow = table.insertRow();
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
cell1.innerHTML = select1.options[select1.selectedIndex].text;
cell2.innerHTML = select2.options[select2.selectedIndex].text;
cell3.innerHTML = '<button onclick="deleteRow(this)">删除</button>';
rowCount++;
}
function deleteRow(button) {
var table = document.getElementById("myTable");
var row = button.parentNode.parentNode;
table.deleteRow(row.rowIndex);
rowCount--;
}
以上就是从两个下拉列表中添加一行到表中,并在选择时删除的实现方法。通过这个方法,可以动态地向表格中添加数据,并在选择时进行删除操作。
领取专属 10元无门槛券
手把手带您无忧上云