极客笔记JavaScript 如何从HTML表中删除列
在HTML中，表格用于以格式化的方式显示网页上的数据。表格包含列和行以展示数据。
有时，开发者需要删除表格列或允许用户删除它们。例如，表格包含用户数据并且有“年龄”和“出生日期”列。在这种情况下，我们需要删除“年龄”列，因为我们可以从“出生日期”列得到年龄值。
开发者可以使用deleteCell()方法来删除任意的列。在本教程中，我们将学习如何通过索引、类名和列名来删除表格列。并且开发者应该记住表格列是基于零的索引。
语法
用户可以按照下面的语法使用deleteCell()方法来删除表格中的任意列。
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(index);
}
在上面的语法中，我们通过遍历每个表格行并删除“index”中的单元格来实现。这里，“index”是要删除的列的索引。
示例1（按索引删除表格列）
在下面的示例中，我们创建了包含数字的表格。还通过CSS为表格添加了边框样式。每当用户点击按钮时，我们执行deleteColumn（）函数。
在deleteColumn（）函数中，我们通过id访问表格。还使用“rows”属性获取所有表格行，并使用数组的“length”属性计算总行数。
我们用2初始化了“index”变量以删除第三列。之后，我们使用for循环遍历表格的所有行。我们使用deleteCell（）方法从每行中删除第三个单元格。
在输出中，用户可以点击按钮从表格中删除第三列。
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<h3> Using the <i> deleteCell() method </i> to delete the table columns using JavaScript </h3>
<table id = "test">
<tr>
<th> First </th>
<th> Second </th>
<th> Third </th>
<th> Fourth </th>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
<td> 7 </td>
<td> 8 </td>
</tr>
<tr>
<td> 9 </td>
<td> 10 </td>
<td> 11 </td>
<td> 12 </td>
</tr>
</table>
<br> <br>
<button onclick = "deleteColumn()"> Delete Column </button>
<script>
function deleteColumn() {
var table = document.getElementById("test");
var rowCount = table.rows.length;
let index = 2;
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(index);
}
}
</script>
</html>
示例2（按表头文本删除表列）
在下面的示例中，我们创建了包含食品数据的表。在此示例中，我们使用表头文本删除表列。
在deleteColumn()函数中，我们访问表的表头。然后，我们访问所有的表头行。接下来，我们遍历表头行，并找到包含‘calories’作为内部HTML的表头的索引。
找到列索引后，我们可以使用for循环和tableCell()方法从每一行中删除特定的单元格，就像在第一个示例中所做的那样。
在输出中，用户应该点击按钮来删除‘calories’列。
<html>
<head>
<style>
table {border-collapse: collapse;}
td, th {border: 1px solid black; padding: 8px; }
</style>
</head>
<body>
<h3>Using the <i>deleteCell() method</i> to delete the table columns using JavaScript </h3>
<table id="food">
<tr>
<th>Food Name</th>
<th>Price</th>
<th>Calories</th>
</tr>
<tr>
<td>Apple</td>
<td>99</td>
<td>95</td>
</tr>
<tr>
<td>Banana</td>
<td>89</td>
<td>105</td>
</tr>
<tr>
<td>Orange</td>
<td>79</td>
<td>85</td>
</tr>
</table>
<br> <br>
<script>
function deleteColumn() {
// get a table
var table = document.getElementById('food');
// get header row
var headerRow = table.getElementsByTagName('tr')[0];
// get headers
var headers = headerRow.getElementsByTagName('th');
// find column index
for (var i = 0; i < headers.length; i++) {
if (headers[i].innerHTML === "Calories") {
var columnIndex = i;
break;
}
}
// use column index to delete cells
if (columnIndex !== undefined) {
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(columnIndex);
}
}
}
</script>
<button onclick="deleteColumn()">Delete Column</button>
</body>
</html>
示例3（根据类名删除多个表格列）
在下面的示例中，我们将学习通过使用类名来删除表格的多个列。
在这里，我们首先访问表格的所有行，并使用for循环迭代遍历它。然后，我们访问包含”extra”类名的特定行的所有单元格。我们使用while循环遍历所有单元格，并使用”cells[0].parentNode.removeChild(cells[0])”逐个删除所有单元格。
在上述代码中，单元格[0]是当前单元格。”parentNode”指的是其所在的行，而removeChild()方法则将其从该行中移除。
在输出中，用户可以点击按钮来从表格中删除多个列。
<html>
<head>
<style>
table { border-collapse: collapse;}
td, th {border: 1px solid black; padding: 8px;}
</style>
</head>
<body>
<h3> Using the <i> deleteCell() method </i> to delete the table columns using JavaScript </h3>
<table id = "HTMLtable">
<tr>
<th> Column 1 </th>
<th class = "extra"> Column 2 </th>
<th >Column 3 </th>
<th class = "extra"> Column 4 </th>
</tr>
<tr>
<td> Row 1, Column 1 </td>
<td class = "extra"> Row 1, Column 2 </td>
<td> Row 1, Column 3 </td>
<td class = "extra"> Row 1, Column 4 </td>
</tr>
<tr>
<td> Row 2, Column 1 </td>
<td class = "extra"> Row 2, Column 2 </td>
<td> Row 2, Column 3 </td>
<td class = "extra"> Row 2, Column 4 </td>
</tr>
<tr>
<td> Row 3, Column 1 </td>
<td class = "extra"> Row 3, Column 2 </td>
<td> Row 3, Column 3 </td>
<td class = "extra"> Row 3, Column 4 </td>
</table> <br> <br>
<button onclick="deleteColumn()"> Delete Column </button>
<script>
function deleteColumn() {
var table = document.getElementById('HTMLtable');
var rows = table.getElementsByTagName('tr');
// iterate through rows
for (var i = 0; i < rows.length; i++) {
// get cells with className 'extra'
var cells = rows[i].getElementsByClassName('extra');
// delete cells
while (cells.length > 0) {
cells[0].parentNode.removeChild(cells[0]);
}
}
}
</script>
</html>
我们学会了使用JavaScript从表格中删除列。在前两个示例中，我们使用deleteCeil（）方法，并将列索引作为参数传递。在第三个示例中，我们使用removeChild（）方法来移除特定的单元格。