在 html 中，表格用于以格式化的方式显示网页上的数据。该表包含显示数据的列和行。
有时，开发人员需要删除表列或允许用户删除它们。例如，该表包含用户数据并具有“年龄”和“生日”列。在这种情况下，我们需要删除“年龄”列，因为我们可以从“生日”列中获取年龄。
开发人员可以使用deletecell()方法删除任何特定列。在本教程中，我们将学习通过索引、类名和列名删除表列。另外，开发人员应该记住表列是从零开始的索引。
语法用户可以按照以下语法使用deletecell()方法删除表格中的任何特定列。
for (var i = 0; i < rowcount; i++) { table.rows[i].deletecell(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（通过标题文本删除表格列）在下面的示例中，我们创建了包含食物数据的表。在此示例中，我们使用标题文本删除表格列。
在deletecolum()函数中，我们访问表的标题。之后，我们访问所有标题行。接下来，我们迭代标题行并找到包含“卡路里”作为内部 html 的标题索引。
找到列索引后，我们可以使用 for 循环和 tablecell() 方法从每一行中删除特定单元格，就像我们在第一个示例中所做的那样。
在输出中，用户应单击按钮删除“卡路里”列。
<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 循环对其进行迭代。之后，我们访问包含“额外”类名的特定行的所有单元格。我们使用 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 从表中删除列。我们在前 2 个示例中通过将列索引作为参数传递来使用 deleteceil() 方法。在第三个示例中，我们使用removechild()方法来删除特定的单元格。
以上就是如何使用 javascript 从 html 表中删除列？的详细内容。