用js代码实现表格的添加

最新推荐文章于 2023-07-28 10:02:57 发布

ciwei925

最新推荐文章于 2023-07-28 10:02:57 发布

阅读量435

点赞数

文章标签： button function input javascript border table

本文链接：https://blog.csdn.net/ciwei925/article/details/5679729

版权

<HTML>
<HEAD>
<TITLE> js添加删除表格 </TITLE>
</HEAD>

<BODY>
<script language="javascript">
function insertrow(){
i1.value==""?str=" ":str=i1.value;
n=tt.rows.length;//行长度
tt.insertRow(n);//插入一行
for (i=0;i<=tt.rows(0).cells.length-1;i++){
tt.rows[n].insertCell(i);//在插入的行中插入单元格
tt.rows[n].cells[i].innerText=str;//放入TEXT
}
}

function insertcell(){
i1.value==""?str=" ":str=i1.value;
n=tt.rows[0].cells.length;//0行的单元格长度
for (i=0;i<=tt.rows.length-1;i++){
tt.rows[i].insertCell(n);//在某行中插入单元格
tt.rows[i].cells[n].innerText=str;//放入TEXT
}
}

function deleterow(){
n=tt.rows.length;//行长度
if(n==1)return;
tt.deleteRow(n-1);//删除某一行
}

function deletecell(){
n=tt.rows[0].cells.length//0行的单元格长度
if(n==1)return;
for (i=0;i<=tt.rows.length-1;i++){
tt.rows[i].deleteCell(n-1);//删除某行的某一单元格
}
}
</script>
<input type="button" value="增加新的行" οnclick="insertrow()">
<input type="button" value="增加新的列" οnclick="insertcell()">
<input type="button" value="删除行" οnclick="deleterow()">
<input type="button" value="删除列" οnclick="deletecell()"><br>
<input name="i1" size="20" value="input" >
<table id="tt" cellpadding=0 cellspacing=0 border="1">
<tr><td></td></tr>
</table>
</BODY>
</HTML>