javascript 实现 table 增加行

来源：互联网发布：美工代码编辑：程序博客网时间：2024/05/29 11:01
<!DOCTYPE html><html><head>    <meta charset="utf-8" /><title>test form post</title></head><body><div>  <input type="button" name="hush" value="add New Row" onClick='addRow()'>    </div>        <table id='tableA'>        <tr >        <td><input type="text" name="name" id='name_0' value="name"><td>            <td><input type="text" name="email" id='email_0' value="email"><td>        </tr>               </table>        <script type='text/javascript'>        function addRow(){          var tableA = document.getElementById('tableA');//根据ID取table                  var trs = tableA.getElementsByTagName('tr');//取得table中的tr                  var lastRow = trs[trs.length-1];//取最后一行tr                  var newRow = lastRow.cloneNode(true);//clone最后一行                  var inputs = newRow.getElementsByTagName('input');//取得复制行的input栏位                  for(var i=0;i<inputs.length;i++){                    var inputTxt = inputs[i];                    inputTxt.value = '';//设定复制行的input 为空                    var seq = inputTxt.id.split('_')[1];                    seq = parseInt(seq) + 1;                    inputTxt.id=inputTxt.id.split('_')[0]+"_"+seq;                    inputTxt.name=inputTxt.name.split('_')[0]+"_"+seq;                  }                  tableA.appendChild(newRow);        }        </script></body></html>
0 0