闲下来整理些资料,与大家共享。
代码有参考别人的部分。
为了方便阅读稍加几处注释。
在web开发中常常会用到表格,对表格的增删也就有了实际应用。
下面这个例子通过动态操作HTML代码利用DOM实现了表格的增删。
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
function get_Element(the_ele,the_tag)
{
the_tag = the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
}
return(null);
}
function add_Row(the_table)
{
var the_row,the_cell;
var cur_rows=the_table.rows.length;
the_row=cur_rows==null?-1:(cur_rows);
var i=the_row-1;
var newrow=the_table.insertRow(i);//得到插入位置
the_cell=newrow.insertCell(0);
the_cell.innerHTML="<center >"+i;
the_cell=newrow.insertCell(1);
the_cell.innerHTML="<center ><input name=/"A/" type=text size=13>";
the_cell=newrow.insertCell(2);
the_cell.innerHTML="<center ><input name=/"B/" type=text size=13 >";
the_cell=newrow.insertCell(3);
the_cell.innerHTML="<center ><input name=/"C/" type=text size=13 ><INPUT type=button value=删除 οnclick=del_row(myTable)>";
}
function del_row(the_table){
var the_cell;
the_cell=get_Element(event.srcElement,"td");
var index=the_cell.parentElement.rowIndex;
if(the_cell==null) return;
if(the_table.rows.length==1) return;
the_table.deleteRow(index);
// 设置序列号
for(var i=1;i<document.getElementById('myTable').rows.length-1;i++)
{
document.getElementById('myTable').rows[i].childNodes[0].innerText =i;
document.getElementById('myTable').rows[i].childNodes[0].style.textAlign='center';
}
}
</script>
</head>
<body>
<table id="myTable" width="100%" border="1" cellpadding="4" cellspacing="1" >
<tr class="TdContent">
<td ><div align="center">序号</div></td>
<td ><div align="center">A</div></td>
<td ><div align="center">B</div></td>
<td ><p align="center">C</p></td>
</tr>
<tr class="TdContent">
<td><div align="center">1</div></td>
<td><div align="center">
<input name="A" type="text" size="13" >
</div></td>
<td><div align="center">
<input name="B" type="text" size="13" >
</div></td>
<td>
<div align="center">
<input name="C" type="text" size="13" >
</div></td>
</tr>
<tr class="TdContent">
<td colspan="4" align="center"><input type="button" value="添加一行" class="ButtonStyle" onClick="add_Row(myTable)"></td>
</tr>
</table>
</body>
</html>