JS删除table的行和列

最新推荐文章于 2022-12-08 21:20:00 发布

置顶红斗笠

最新推荐文章于 2022-12-08 21:20:00 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_38061311/article/details/86993559

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态操作HTML表格的方法，包括如何通过点击事件删除指定的行或列。此方法适用于需要灵活调整表格结构的网页应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script >
		function deleteCol(obj){
		    var index=obj.cellIndex;
		    var table = document.getElementById("table");
		    var len = table.rows.length; 
		    for(var i = 0;i < len;i++){
		        table.rows[i].deleteCell(index);
		    }
		}
		function deleteRow(obj){
		    var index=obj.parentNode.rowIndex;
		    var table = document.getElementById("table");
		    table.deleteRow(index);
		}
		</script>
		<style>
		table *{border:1px red solid;}
		</style>

<table id="table">
       <tr class="onclickHead">
           <td onclick="deleteCol(this)">删除列</td>
           <td onclick="deleteCol(this)">删除列</td>
           <td onclick="deleteCol(this)">删除列</td>
           <td onclick="deleteRow(this)">删除行</td>
           <td> </td>
       </tr>
       <tr>
          <td>名字</td>
          <td>年龄</td>
          <td>性别</td>
          <td onclick="deleteRow(this)">删除行</td>
       </tr>
       <tr>
          <td>张三</td>
          <td>36</td>
          <td>男</td>
          <td onclick="deleteRow(this)">删除行</td>
       </tr>
</table>