如何动态控制表单元素

主要通过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="#" onclick="add();">增加元素</a></td>
 </tr>
</table>
</body>
</html>

posted on 2007-08-08 16:11 software5168 阅读(647) 评论(0)  编辑  收藏 所属分类: Java學習


只有注册用户登录后才能发表评论。


网站导航:
 
<2007年8月>
2930311234
567891011
12131415161718
19202122232425
2627282930311
2345678

导航

统计

常用链接

留言簿(3)

随笔分类

随笔档案

收藏夹

JAVA學習網站

綜合

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜