动态添加Table行

来源：互联网发布：ubuntu拷贝文件到u盘编辑：程序博客网时间：2024/05/06 06:18

<html >
<head>
    <title>动态添加Table行</title>
    <script type="text/javascript">
          function AddNewRow()
          {
                var row_index= document.getElementById("hidItemList").value;
                var new_row=Table1.insertRow(Table1.rows.length);
                new_row.setAttribute("id", "row"+row_index);
                new_row.setAttribute("align", "center");
                var new_col=new_row.insertCell(0);
                new_col.innerHTML="<span id='spanID"+row_index+"'>用户ID"+row_index+"</span>";
                var new_col=new_row.insertCell(1);
                new_col.innerHTML="<span id='spanItem"+row_index+"'>用户名"+row_index+"</span>";
                var new_col=new_row.insertCell(2);
                new_col.innerHTML="<input type='text' name='txtMATNR"+row_index+"' style='width: 90px' >";
                var new_col=new_row.insertCell(3);
                new_col.innerHTML=" <span id='spanGG"+row_index+"'></span>";
                var new_col=new_row.insertCell(4);
                new_col.innerHTML="<input type='button' value='删除此行' name='btnDel"+row_index+"' style='width: 60px' onclick=/"delete_row('row"+row_index+ "')/">";
                document.getElementById("hidItemList").value = parseInt(row_index)+1;
          }
          function delete_row(rname)
          {
                var i;
                i=Table1.rows(rname).rowIndex;
                Table1.deleteRow(i);
          }
    </script>
</head>
<body>
        <table border="1" width="600px" id="Table1">
            <tr align="center">
                <td>用户ID</td>
                <td>用户名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>删除</td>

            </tr>
        </table>
        <input id="新增Item" type="button" value="button" onclick="AddNewRow()"/>
        <input id="hidItemList" type="hidden" value="1"/>
</body>
</html>