本文介绍了一个简单的HTML表格，并展示了如何通过JavaScript实现表格的增删行和列功能。提供了具体的HTML与JavaScript代码实现。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Table test</title>
</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
<tbody>
<tr>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
<tr>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</tbody>
</table>
<br/>
<input type="button" value="删除一行" onclick="deleteRow()"/>
<input type="button" value="删除一列" onclick="deleteColumn()"/>
<p>
=====================
</p>
<input type="button" value="addrow" onclick="addrow()" />
<input type="button" value="delrow" onclick="delrow()" />
<div id="tableTest">
</div>
</body>
</html>
<script language="JavaScript" type="text/javascript">
function addrow()
{
var tab=document.getElementById("table2");
var _tr=tab.insertRow(tab.rows.length);
//创建八列
for(var j=0;j<8;j++){
var _td=_tr.insertCell(j);
//var _tn=document.createTextNode(i.toString()+j.toString());
var t=document.createElement("input");
t.size=20;
t.value="aaaaa";
_td.appendChild(t);
}
}
function delrow()
{
var tab=document.getElementById("table2");
tab.deleteRow(tab.rows.length-1);
}
<!--
//获取容器div的引用
var container=document.getElementById("tableTest");
//创建表格对象
var _table=document.createElement("table");
_table.id="table2";
//设置表格属性
_table.setAttribute("border","1");
_table.setAttribute("borderColor","black");
_table.setAttribute("width","200");
//创建一行
for(var i=0;i<1;i++){
var _tr=_table.insertRow(i);
//创建八列
for(var j=0;j<8;j++){
var _td=_tr.insertCell(j);
//var _tn=document.createTextNode(i.toString()+j.toString());
var t=document.createElement("input");
t.size=20;
_td.appendChild(t);
}
}
//将表格显示于页面
container.appendChild(_table);
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
//获得表格对象
var _table=document.getElementById("table1");
//定义函数，用于删除第一行
function deleteRow(){
_table.deleteRow(0);
}
//定义函数，用于删除第一列
function deleteColumn(){
//删除一列时需要对每一行分别进行列删除
for(var i=0;i<_table.rows.length;i++){
_table.rows.deleteCell(0);
}
}
//-->
</script>
JavaScript动态添加行，删除行，添加文本框
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
