运用js脚本实现table自动添加、删除行

1前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddTable.aspx.cs" Inherits="AddTable" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        function tableAddRow(tableName) {
            var row = tableName.insertRow(tableName.rows.length);
            var i = tableName.rows.length - 2;
            var col;
            if (tableName == tableId)
            {
                col = row.insertCell(0);
                col.innerHTML = "<input type='button'  id='btnDel' name='btnDel' value='-' onclick='DelRow(this)'/>";
                col = row.insertCell(1);
                col.innerHTML = "<input type='text' size='12' />";
                col = row.insertCell(2);
                col.innerHTML = "<input type='text' size='12' />";
                col = row.insertCell(3);
                col.innerHTML = "<input type='text' size='12' />";
                col = row.insertCell(4);
                col.innerHTML = "<input type='text' size='12' />";
                col = row.insertCell(5);
                col.innerHTML = "<input type='text' size='12' />";
                col = row.insertCell(6);
                col.innerHTML = "<input type='text' size='12' />";
                col = row.insertCell(7);
                col.innerHTML = "<input type='text' size='12' />";

            }
        }
        function DelRow(obj)
        {
            var t = document.getElementById('tableId');
            t.deleteRow(obj.parentNode.parentNode.rowIndex)
           
        }

    </script>


</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table style="width:100%" text-align="center"  border="0" id="tableId">
                <tr>
                    <td align="center">
                        <input type="button" id="btnAdd" name="btnAdd" value="+" onclick="tableAddRow(tableId);" /></td>
                    <td align="center">编号</td>
                    <td align="center">学号</td>
                    <td align="center">姓名</td>
                    <td align="center">性别</td>
                    <td align="center">年龄</td>
                    <td align="center">专业</td>
                    <td align="center">住址</td>
                </tr>

            </table>
        </div>
    </form>
</body>
</html>
View Code

2效果测试

posted @ 2013-05-26 20:25  曹县三胖暴打大猩猩  阅读(205)  评论(0)  编辑  收藏  举报