在下拉列表中添加表行,选择并删除行是一个常见的前端开发需求,可以通过以下步骤来实现:
<table id="myTable">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="mySelect">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</td>
<td>内容1</td>
<td>
<button onclick="addRow()">添加行</button>
</td>
</tr>
</tbody>
</table>
function addRow() {
var table = document.getElementById("myTable");
var select = document.getElementById("mySelect");
var selectedOption = select.options[select.selectedIndex];
var newRow = table.insertRow(table.rows.length);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
cell1.innerHTML = selectedOption.text;
cell2.innerHTML = "内容2";
cell3.innerHTML = "<button onclick='deleteRow(this)'>删除行</button>";
}
function deleteRow(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}
通过以上步骤,就可以实现在下拉列表中添加表行,并且可以选择并删除行的功能。
关于下拉列表的概念、分类、优势、应用场景,以及腾讯云相关产品和产品介绍链接地址,可以参考以下内容:
注意:根据要求,本回答中不提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。
领取专属 10元无门槛券
手把手带您无忧上云