淘先锋技术网

首页 1 2 3 4 5 6 7

javascript 删除table

javascript可以对HTML中的表格进行操作，其中之一就是删除表格。常见的场景是，在动态添加或修改表格时，需要在某些条件下将某一行或某几行删除。

我们可以通过JS的一些内置方法来完成表格删除，下面是一个具体的例子：

//HTML代码
<table id="myTable">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>小红</td>
<td>19</td>
</tr>
<tr>
<td>3</td>
<td>小飞</td>
<td>21</td>
</tr>
</tbody>
</table>
//JS代码
function deleteRow(row_num) {
var table = document.getElementById("myTable");
table.deleteRow(row_num);
}
//删除第2行
deleteRow(2);

以上代码中，我们定义了一个名为"deleteRow"的函数，该函数接受一个参数，即需要删除的行数。在函数内部，我们首先获取到表格对象，然后调用deleteRow方法来删除指定行。

需要注意的是，通过deleteRow方法删除表格是从0开始计数的，即第一行是0、第二行是1、以此类推。因此，如果我们需要删除表格第2行，其在JS代码中对应着数字1。

除了通过使用内置方法删除表格外，我们还可以使用其他的方式来实现表格删除，比如通过改变表格中某个单元格的内容来达到隐藏的效果：

//HTML代码
<table id="myTable">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小明</td>
<td>20</td>
<td><a href="javascript:deleteRow(1);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>小红</td>
<td>19</td>
<td><a href="javascript:deleteRow(2);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>小飞</td>
<td>21</td>
<td><a href="javascript:deleteRow(3);">删除</a></td>
</tr>
</tbody>
</table>
//JS代码
function deleteRow(row_num) {
var table = document.getElementById("myTable");
table.rows[row_num].cells[0].innerHTML = " ";
table.rows[row_num].cells[1].innerHTML = " ";
table.rows[row_num].cells[2].innerHTML = " ";
table.rows[row_num].cells[3].innerHTML = " ";
}

在以上代码中，我们在表格中添加了一个"操作"列，并在每行中添加了一个"删除"链接。当用户点击该链接时，我们将会调用一个名为"deleteRow"的JS函数来删除指定的行。

在该函数内部，我们使用innerHTML方法来改变表格中每个单元格的内容，使其变为空白。由于表格中使用了CSS样式，因此这些空白的单元格在网页上是看不见的，即达到了删除的效果。

总之，在使用JS删除表格时，我们需要根据具体的需求选择合适的方法，在代码中仔细考虑每个细节。通过JS的强大功能，我们可以轻松地实现各种表格操作，帮助我们更好地管理网页内容。