使用javascript从表中删除列
我需要html使用javascript. 该表是csv使用框架从文件自动创建的，因此我无法修改它（例如添加一个id等）。我设法通过添加到列标题的链接来消除该列，然后单击它消除了该列，但是我找不到在页面加载时自动执行此操作的方法。我是新手，javascript所以请尝试为傻瓜解释一下。
function closestByTagName(el, tagName) {
while (el.tagName != tagName) {
el = el.parentNode;
if (!el) {
return null;
}
}
return el;
}
function delColumn(link) {
var idx = 2,
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 th = document.querySelectorAll("th");
th[2].innerHTML += ' <a href="#" onclick="return delColumn(this)">X</a>';
}
<div class="table">
<table class="inline">
<tr class="row0">
<th class="col0">FullName</th>
<th class="col1">Country</th>
<th class="col2">Position</th>
<th class="col3">CellPhone</th>
<th class="col4">Email</th>
</tr>
<tr class="row1">
<td class="col0">magnus</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">22</td>
<td class="col4">magnus.gaylord@example.com</td>
</tr>
<tr class="row2">
<td class="col0">Phoebe Feest</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">23</td>
<td class="col4">ylittel@example.net</td>
</tr>
<tr class="row3">
<td class="col0">Prof. Tad Johnston</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">24</td>
<td class="col4">srau@example.org</td>
</tr>
<tr class="row4">
<td class="col0">Annabelle Ortiz</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">25</td>
<td class="col4">damore.walker@example.org</td>
上面的代码有效，但我必须按下x位置列上的 才能消除它，我需要它自动发生。换句话说，我不想使用代码href="#" onclick="return delColumn(this)"而是让它在加载时发生。
紫衣仙女2回答
-
桃花长相依
由于您的所有列都有一个特定的class，因此一种可能的解决方案ES6是使用：document.querySelectorAll(".col2").forEach(col => col.remove());或者使用标准方法：var cols = document.querySelectorAll(".col2");for (var i = 0; i < cols.length; i++){ cols[i].remove();}例子：window.onload = function(){ var cols = document.querySelectorAll(".col2"); for (var i = 0; i < cols.length; i++) { cols[i].remove(); } // Or with ES6: //document.querySelectorAll(".col2").forEach(col => col.remove());}<div class="table"> <table class="inline"> <tr class="row0"> <th class="col0">FullName</th> <th class="col1">Country</th> <th class="col2">Position</th> <th class="col3">CellPhone</th> <th class="col4">Email</th> </tr> <tr class="row1"> <td class="col0">magnus</td> <td class="col1">Guatemala</td> <td class="col2">Lacayo</td> <td class="col3">22</td> <td class="col4">magnus.gaylord@example.com</td> </tr> <tr class="row2"> <td class="col0">Phoebe Feest</td> <td class="col1">Guatemala</td> <td class="col2">Lacayo</td> <td class="col3">23</td> <td class="col4">ylittel@example.net</td> </tr> <tr class="row3"> <td class="col0">Prof. Tad Johnston</td> <td class="col1">Guatemala</td> <td class="col2">Lacayo</td> <td class="col3">24</td> <td class="col4">srau@example.org</td> </tr> <tr class="row4"> <td class="col0">Annabelle Ortiz</td> <td class="col1">Guatemala</td> <td class="col2">Lacayo</td> <td class="col3">25</td> <td class="col4">damore.walker@example.org</td> </tr> <tr class="row5"> <td class="col0">Mrs. Adella Schiller IV</td> <td class="col1">Guatemala</td> <td class="col2">Lacayo</td> <td class="col3">26</td> <td class="col4">jadyn.dibbert@example.com</td> </tr> </table></div> -
慕神8447489
Shidersz 的回答很好，但值得注意的是，您可以使用单个 CSS 规则而不是 JavaScript：.col2 { display: none;}<div class="table"> <table class="inline"> <tr class="row0"> <th class="col0">FullName</th> <th class="col1">Country</th> <th class="col2">Position</th> <th class="col3">CellPhone</th> <th class="col4">Email</th> </tr> <tr class="row1"> <td class="col0">magnus</td> <td class="col1">Guatemala</td> <td class="col2">Lacayo</td> <td class="col3">22</td> <td class="col4">magnus.gaylord@example.com</td> </tr> <tr class="row2"> <td class="col0">Phoebe Feest</td> <td class="col1">Guatemala</td> <td class="col2">Lacayo</td> <td class="col3">23</td> <td class="col4">ylittel@example.net</td> </tr> <tr class="row3"> <td class="col0">Prof. Tad Johnston</td> <td class="col1">Guatemala</td> <td class="col2">Lacayo</td> <td class="col3">24</td> <td class="col4">srau@example.org</td> </tr> <tr class="row4"> <td class="col0">Annabelle Ortiz</td> <td class="col1">Guatemala</td> <td class="col2">Lacayo</td> <td class="col3">25</td> <td class="col4">damore.walker@example.org</td> </tr> <tr class="row5"> <td class="col0">Mrs. Adella Schiller IV</td> <td class="col1">Guatemala</td> <td class="col2">Lacayo</td> <td class="col3">26</td> <td class="col4">jadyn.dibbert@example.com</td> </tr> </table></div>
随时随地看视频慕课网APP
相关分类
JavaScript