[英]Deleting a user selected column in a html table using javascript ( no jQuery)
I have implement the following code to delete a column in a html table. 我已实现以下代码来删除html表中的列。 I want to be able to implement this when the user selects a certain column rather than just the last column being deleted all the time - can anyone help ?
我希望能够在用户选择某个列而不是一直删除最后一个列时实现这一点-任何人都可以帮忙吗?
function deleteColumn(){
var lastColumn = document.getElementById('Overall Result');
var table = document.getElementById('tg-LTO9U');
var rowCount = table.rows.length;
for(var i=0;i<rowCount;i++){
table.rows[i].deleteCell(table.rows[i].cells.length-2);
}
}
Delete Column 删除栏
I added a link to the table header to show how to pass an index to the function 我在表头添加了一个链接,以显示如何将索引传递给函数
function closestByTagName(el, tagName) { while (el.tagName != tagName) { el = el.parentNode; if (!el) { return null; } } return el; } function delColumn(link) { var idx = link.getAttribute("data-idx"), table = closestByTagName(link, "TABLE"), rowCount = table.rows.length; for (var i = 0; i < rowCount; i++) { table.rows[i].deleteCell(idx); } return false; } window.onload = function() { var ths = document.querySelectorAll("th"); for (var i = 0; i < ths.length; i++) { ths[i].innerHTML += ' <sup><a href="#" data-idx="' + i + '" class="del" onclick="return delColumn(this)">X</a></sup>'; } }
sup { font-size:xx-small } .del { text-decoration:none }
<table> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> </thead> <tbody> <tr> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td>Five</td> </tr> <tr> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td>Five</td> </tr> </tbody> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.