作者在 2008-01-11 15:54:50 发布以下内容
主要通过javascript实现，理解IE的DOM结构，并调用元素的固定方法，可以实现表单元素的动态增删。
下面是部分代码。
<html>
<head>
<script. language="javascript">
function add(){
//取得表格
var table = document.getElementById("table1");
//取得行数;
var num = table.rows.length;
//增加一行
var newrow1 = table.insertRow(num-1);
var cell1 = newrow1.insertCell();
var cell2 = newrow1.insertCell();
var cell3 = newrow1.insertCell();
var cell4 = newrow1.insertCell();
//增加行元素
var inputcell2 = document.createElement("<input size='32' name=''>");
cell2.appendChild(inputcell2);
var inputcell4_1 = document.createElement("<input size='32' name=''>");
var inputcell4_2 = document.createElement("<input type='button' value='删除元素'onClick='del(this);'/>");
cell4.appendChild(inputcell4_1);
cell4.appendChild(inputcell4_2);
//刷新标签显示
frash();
}
function del(obj){
//取得按钮所在行
var i = obj.parentNode.parentNode.rowIndex;
var tab = document.getElementById("table1");
//删除按钮所在行
tab.deleteRow(i-1);
frash();
}
function frash(){
var table = document.getElementById("table1");
var num = table.rows.length;
//计算动态元素个数
var n = num-2;
for(i=1;i<=n;i++){
//设置标签值
table.rows[i].cells[0].innerText="元素"+i+"属性A";
//设置属性值
table.rows[i].cells[1].childNodes[0].setAttribute("name","ysa"+i);
table.rows[i].cells[2].innerText="元素"+i+"属性B";
table.rows[i].cells[3].childNodes[0].setAttribute("name","ysb"+i);
}
}
</script>
</head>
<body>
<table id="table1" width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>标签1</td>
<td><input name="a"></td>
<td>标签2</td>
<td><input name="b"></td>
</tr>
<tr>
<td colspan="4" align="center"><a href="#" nclick="add();">增加元素</a></td>
</tr>
</table>
</body>
</html>
下面是部分代码。
<html>
<head>
<script. language="javascript">
function add(){
//取得表格
var table = document.getElementById("table1");
//取得行数;
var num = table.rows.length;
//增加一行
var newrow1 = table.insertRow(num-1);
var cell1 = newrow1.insertCell();
var cell2 = newrow1.insertCell();
var cell3 = newrow1.insertCell();
var cell4 = newrow1.insertCell();
//增加行元素
var inputcell2 = document.createElement("<input size='32' name=''>");
cell2.appendChild(inputcell2);
var inputcell4_1 = document.createElement("<input size='32' name=''>");
var inputcell4_2 = document.createElement("<input type='button' value='删除元素'onClick='del(this);'/>");
cell4.appendChild(inputcell4_1);
cell4.appendChild(inputcell4_2);
//刷新标签显示
frash();
}
function del(obj){
//取得按钮所在行
var i = obj.parentNode.parentNode.rowIndex;
var tab = document.getElementById("table1");
//删除按钮所在行
tab.deleteRow(i-1);
frash();
}
function frash(){
var table = document.getElementById("table1");
var num = table.rows.length;
//计算动态元素个数
var n = num-2;
for(i=1;i<=n;i++){
//设置标签值
table.rows[i].cells[0].innerText="元素"+i+"属性A";
//设置属性值
table.rows[i].cells[1].childNodes[0].setAttribute("name","ysa"+i);
table.rows[i].cells[2].innerText="元素"+i+"属性B";
table.rows[i].cells[3].childNodes[0].setAttribute("name","ysb"+i);
}
}
</script>
</head>
<body>
<table id="table1" width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>标签1</td>
<td><input name="a"></td>
<td>标签2</td>
<td><input name="b"></td>
</tr>
<tr>
<td colspan="4" align="center"><a href="#" nclick="add();">增加元素</a></td>
</tr>
</table>
</body>
</html>
