
在 HTML 中,表格用于以格式化的方式显示网页上的数据。该表包含显示数据的列和行。
有时,开发人员需要删除表列或允许用户删除它们。例如,该表包含用户数据并具有“年龄”和“生日”列。在这种情况下,我们需要删除“年龄”列,因为我们可以从“生日”列中获取年龄。
开发人员可以使用deleteCell()方法删除任何特定列。在本教程中,我们将学习通过索引、类名和列名删除表列。另外,开发人员应该记住表列是从零开始的索引。
语法
用户可以按照以下语法使用deleteCell()方法删除表格中的任何特定列。
立即学习“Java免费学习笔记(深入)”;
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(index);
}
在上面的语法中,我们迭代每个表格行并从“索引”中删除单元格。这里,‘index’是要删除的列的索引。
示例1(按索引删除表格列)
在下面的示例中,我们创建了包含单词数字的表格。此外,我们通过在 CSS 中提供边框来设计表格的样式。每当用户单击该按钮时,我们都会执行 deleteColumn() 函数。
在deleteColumn()函数中,我们使用id访问表。此外,我们使用“rows”属性获取表的所有行,并使用数组的“length”属性计算总行数。
我们用 2 初始化“index”变量来删除第三列。之后,我们使用 for 循环来遍历表的所有行。我们使用 deleteCell() 方法删除每行中的第三个单元格。
在输出中,用户可以单击按钮从表中删除第三列。
极速网店升级内容:1.网店系统升级到Net2.0框架2.网店系统架构升级,使系统速度提升30%3.修正购物车下一步容易出错的问题4.修正会员删除的Bug5.修正广告时间不能选择的问题6.修正程序的兼容问题2008版升级内容如下:1、修正打SP2后用户登陆时出错的问题;2、修正用户列表错误的问题;3、修正程序的兼容性问题;4、修正用户Cookie加密码乱码的问题5、修正程序中存在的小BUG;6、优化
Using the deleteCell() method to delete the table columns using JavaScript
| First | Second | Third | Fourth |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
示例2(通过标题文本删除表格列)
在下面的示例中,我们创建了包含食物数据的表。在此示例中,我们使用标题文本删除表格列。
在deleteColum()函数中,我们访问表的标题。之后,我们访问所有标题行。接下来,我们迭代标题行并找到包含“卡路里”作为内部 HTML 的标题索引。
找到列索引后,我们可以使用 for 循环和 tableCell() 方法从每一行中删除特定单元格,就像我们在第一个示例中所做的那样。
在输出中,用户应单击按钮删除“卡路里”列。
Using the deleteCell() method to delete the table columns using JavaScript
| Food Name | Price | Calories |
|---|---|---|
| Apple | 99 | 95 |
| Banana | 89 | 105 |
| Orange | 79 | 85 |
示例3(通过类名删除多个表列)
在下面的示例中,我们将学习使用类名删除表格的多列。
在这里,我们首先访问表的所有行,然后使用 for 循环对其进行迭代。之后,我们访问包含“额外”类名的特定行的所有单元格。我们使用 while 循环遍历所有单元格,并使用“cells[0].parentNode.removeChild(cells[0])”一一删除所有单元格。
在上面的代码中,单元格[0]是当前单元格。 “parentNode”引用其行,removeChild() 方法从该行中删除子节点。
在输出中,用户可以单击按钮从表中删除多列。
Using the deleteCell() method to delete the table columns using JavaScript
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 | Row 1, Column 4 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 | Row 2, Column 4 |
| Row 3, Column 1 | Row 3, Column 2 | Row 3, Column 3 | Row 3, Column 4 |
我们学会了使用 JavaScript 从表中删除列。我们在前 2 个示例中通过将列索引作为参数传递来使用 deleteCeil() 方法。在第三个示例中,我们使用removeChild()方法来删除特定的单元格。










