1.table共4行,每个tr下添加一个按钮
2.在给table的tr动态添加按钮时,先添加到tr的第一行;如果第一行存在,则添加到第二行,如此反复完成 4个按钮的添加
疑问:怎样快速判断tr中已经存在按钮呢?
该回答采用文心一言:
可以通过遍历每个tr元素,查找其中是否存在按钮元素来实现。以下是一个示例代码,可以实现给table的每个tr添加一个按钮,如果该tr已经存在按钮,则将新按钮添加到下一行:
<table id="myTable">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
</tr>
<tr>
<td>Row 4, Cell 1</td>
<td>Row 4, Cell 2</td>
</tr>
</table>
<script>
var table = document.getElementById("myTable");
var row, cell, button;
// 遍历每一行
for (var i = 0; i < table.rows.length; i++) {
row = table.rows[i];
// 遍历每一行中的每个单元格
for (var j = 0; j < row.cells.length; j++) {
cell = row.cells[j];
// 如果该单元格中已经存在按钮,则在下一行添加新按钮
if (cell.getElementsByTagName("button").length > 0) {
row = i + 1 < table.rows.length ? table.rows[i + 1] : null;
}
// 创建新按钮并添加到当前单元格中
button = document.createElement("button");
button.innerHTML = "Button " + (j + 1);
cell.appendChild(button);
}
}
</script>
在上述代码中,我们首先通过getElementById方法获取到table元素,然后使用双重循环遍历每一行和每一行中的每个单元格。在遍历单元格时,我们使用getElementsByTagName方法检查该单元格中是否已经存在按钮元素。如果存在,则将行数加1,继续遍历下一行;否则直接在当前单元格中创建新按钮并添加进去。最后,我们将新按钮添加到当前单元格中。重复执行以上步骤,直到给所有的tr元素都添加了一个按钮。
可以直接 获取到 tr ,然后tr.find("button"),在根据length就可以知道是否含有button ,比如
let tr = tbody.find("tr")
if (tr.find("button").length === 0{
//没有button
}