如何使用Javascript删除一行中的所有列
如何使用Javascript删除一行中的所有列
提问于 2021-11-26 13:51:42
我有以下代码来删除表中的列：
let xvm = document.getElementsByClassName("removedor");
let k = 0
let y = document.querySelectorAll('td')
let ya = document.querySelectorAll('td').length
let z = document.querySelectorAll('th')
let za = document.querySelectorAll('th').length
let restaurador = document.getElementsByClassName('restaurador');
for (let k = 0; k < za; k++) {
let xvm = document.getElementsByClassName("removedor");
let y = document.querySelectorAll('td')
let ya = document.querySelectorAll('td').length
let z = document.querySelectorAll('th')
let za = document.querySelectorAll('th').length
let restaurador = document.getElementsByClassName('restaurador');
document.getElementsByClassName("removedor")[k].addEventListener("click", function() {
z[k].style.display = "none";
y[k].style.display = "none";
})
}当我单击以删除列时，代码只处理第一行。我想让它从表中的所有行中删除我单击的列。
回答 1
Stack Overflow用户
发布于 2021-11-26 15:06:59
您可以向每个delete按钮添加一个类，然后在该节点列表上运行forEach循环，并检查是否有单击。单击时，使用event.target并将节点列表提升到最近的父元素，以添加一个验证=> e.target.closest('td')，这将为您提供按钮所在的表数据元素。然后，您可以插入验证以确保用户希望删除，从而获得行=>的id
td.insertAdjacentHTML('beforeend', ` <label class="checkLabel">Delete ${row}? <input type="checkbox" class="checkYes"></label>`);第二个事件侦听器用于检查我们添加到DOM中进行检查的类是否存在于DOM => checkYes.addEventListener('change', deleteRow);中，如果不存在，则添加将删除该行的HTML。
checkYes.addEventListener('change', deleteRow);
deleteRow的函数：
function deleteRow(e){
e.target.closest('tr').remove();
}我没有为delete按钮添加切换，但是您也可以为delete按钮添加一个切换，如果您再次点击delete按钮，它将隐藏二次验证。
const del = document.querySelectorAll('.del');
function deleteRow(e) {
e.target.closest('tr').remove();
}
function checkDel(e) {
let td = e.target.closest('td');
let row = e.target.closest('tr').id;
if (!td.querySelector('.checkYes')) {
td.insertAdjacentHTML('beforeend', ` <label class="checkLabel">Delete ${row}? <input type="checkbox" class="checkYes"></label>`);
}
let checkYes = td.querySelector('.checkYes');
checkYes.addEventListener('change', deleteRow);
}
del.forEach(btn => {
btn.addEventListener('click', checkDel);
})<table id="myTable">
<tr id="row_1">
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
<td>Row 1 Col 4</td>
<td><button class="del">Delete this row</button></td>
</tr>
<tr id="row_2">
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
<td>Row 2 Col 4</td>
<td><button class="del">Delete this row</button></td>
</tr>
<tr id="row_3">
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
<td>Row 3 Col 4</td>
<td><button class="del">Delete this row</button></td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70125496
复制相关文章
相似问题
腾讯云开发者
