表格动态添加删除行。很初级的版本，很久了。自己存档下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
th{background-color:#00CCFF;text-align:left;padding:2px 12px;}
td{background-color:#eee;border-bottom:1px solid #ccc;padding:2px 12px;}
.mart_20{margin-top:20px;}
</style>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" id="tbl">
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Operation</th>
</tr>
</table>
<input class="mart_20" type="button" value="Add New" οnclick="addNew()" />
<script type="text/javascript" language="javascript">
var tableCon=document.getElementById("tbl"); //获取table
/*添加行操作*/
function addNew(){
var tdNum = tableCon.rows.length ; //获取表格列数
var newTR=tableCon.insertRow(tdNum); //创建新行
for(i=0;i<tableCon.rows(0).cells.length;i++){
newTR.insertCell(i); //在新行中创建i个单元格
} //第一列Index的数值
newTR.cells(0).innerHTML="<input type='text' />"; //第一列的IP地址输入框
newTR.cells(1).innerHTML="3"; //第二列的数值
newTR.cells(2).innerHTML="<a href='#1' mce_href='#1' οnclick='deleteTR(this.parentNode.parentNode)'>delete</a>"; //删除按钮
}
/*删除行操作*/
function deleteTR(current){
current.parentNode.deleteRow(current.rowIndex); //删除当前行
}
</script>
</body>
</html>
1692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
