HTML动态增加和删除表格的行和列

最新推荐文章于 2024-05-18 13:50:21 发布

菜鸟下山

最新推荐文章于 2024-05-18 13:50:21 发布

阅读量4.5w

点赞数 6

文章标签： HTML

本文链接：https://blog.csdn.net/huzijia888/article/details/78701091

版权

起始状态

增加行

增加列

删除行

删除列

<!doctype html>
<html>
<head>

<style>

</style>
<script>
function addrow(){
var c=document.getElementById('mytable');//获得表格的信息
if( c.rows.length==0){//如果是向一个空表增加一行
var x=c.insertRow(0);//向空表插入一行
var y=x.insertCell(0);//向新行插入一列
y.innerHTML="new cell0";
}
else{
var z=c.rows[0].cells;//如果不是空表，首先获得表格有多少列，先获取再插入新行
var x=c.insertRow(0);
for(var i=0;i<z.length;i++){//依次向新行插入表格列数的单元格
var y=x.insertCell(i);
y.innerHTML="new cell"+i;
}
}
}
function delrow(){
var x=document.getElementById("mytable");
x.deleteRow(0);//删除一行
}
function addcol(){
var c=document.getElementById('mytable');//获取表格信息
var len=c.rows.length;//获得行数
var ro=c.rows[0].cells;
var len2=ro.length;//获得列数
for(var i=0;i<len;i++){
var x=c.rows[i].insertCell(len2);//依次向每一行的末尾插入一个新列
x.innerHTML="new cell"+len2;
}
}
function delcol(){
var c=document.getElementById('mytable');//获取表格信息
var len=c.rows.length;//获取表格的行数
var ro=c.rows[0].cells//获取表格的列数
var len2=ro.length-1;
for(var i=0;i<len;i++){
var x=c.rows[i].deleteCell(len2);//删除每一行末尾的单元格
}
}
</script>
<meta charset="UTF-8">
</head>
<body>
<p><input type="button" value="增加行" οnclick="addrow()" >&nbsp&nbsp<input type="button" value="删除行" οnclick="delrow()">&nbsp&nbsp
<input type="button" value="增加列" οnclick="addcol()">&nbsp&nbsp<input type="button" value="删除列" οnclick="delcol()"></p>
<table frame="border" rules="all" id="mytable">
<caption>测试表</caption>
<tr>
<td>单元格</td><td>单元格</td>
</tr>
</table>
</body>
</html>

菜鸟下山

关注

6
点赞
踩
60

收藏

觉得还不错? 一键收藏
3
评论
HTML动态增加和删除表格的行和列

起始状态增加行增加列删除行删除列function addrow(){ var c=document.getElementById('mytable');//获得表格的信息 if( c.rows.length==0){//如果是向一个空表增加一行 var x=c.insertRow(0);//
复制链接

扫一扫