javascript 动态增加输入框数量

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>


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值