用js实现表格的动态删除，修改，增加的功能

<!DOCTYPEHTML><html><body><form><center><fieldset><legend>学生信息列表</legend><table><tr><... <!DOCTYPE HTML> <html> <body> <form> <center> <fieldset> <legend>学生信息列表</legend> <table> <tr> <td align="right"><a href="a">增加</a> <a href="b">删除</a> <table border="1px" width=600px cellspacing="0px" style="border-collapse:collapse"> <tr> <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> <td></td> </tr> <tr> <td align="center"><input type="checkbox" name="a"> </td> <td align="center">01</td> <td align="left">张三</td> <td align="center">22</td> <td align="center">本科</td> <td align="center">男</td> <td align="left">朝阳区</td> <td align="center"><a href="c"><font color="#8A2BE2"> 修改</a></td> </tr> <tr> <td align="center"><input type="checkbox" name="a"></td> <td align="center">02</td> <td align="left">李四</td> <td align="center">21</td> <td align="center">本科</td> <td align="center">女</td> <td align="left">宽城区</td> <td align="center"></font><a href="c"><font color="#8A2BE2"> 修改</a></td> </tr></table></fieldest></form></body>
怎么样才能真的实现表格里面修改，删除，增加的功能展开

 我来答

1个回答

#热议# 为什么有人显老，有人显年轻？

yugi111
2015-08-15 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.2亿

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>RunJS 演示代码</title>
    <style>
.* {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: red;
}

.wrap {
    width: 900px;
    height: 300px;
    overflow-y: auto;
    margin: auto;
}

table {
    width: 800px;
    border: 1px solid black;
    border-collapse: collapse;
}

th {
    background-color: orange;
}

td,th {
    border: 1px solid black;
    text-align: center;
}

table input[type=text] {
    width: 100px;
}
    </style>
    <script>
        var yugi = {
            col: 6,
            addRow: function(table) {
                var vals = [a.value, b.value, c.value, d.value, e.value, "<a href='###' onclick='yugi.modify(table,this)'>修改</a>&nbsp;<a href='###' onclick='yugi.del(table,this)'>删除</a>"];
                var tr = table.insertRow(table.tBodies[0].rows.length);
                for (var i = 0; i < yugi.col; i++) {
                    var td = tr.insertCell(tr.cells.length);
                    td.innerHTML = vals[i];
                }
            },
            modify: function(table, row) {
                var r = row.parentElement.parentElement,
                    c = r.cells;
                if (/.*修改.*/g.test(row.innerHTML)) {
                    for (var i = 0; i < c.length - 1; i++) {
                        var ci = c[i];
                        var txt = document.createElement("input");
                        txt.type = "text";
                        txt.value = ci.innerHTML;
                        ci.innerHTML = "";
                        ci.appendChild(txt);
                    }
                    row.innerHTML = "保存";
                } else {
                    for (var i = 0; i < c.length - 1; i++) {
                        var ci = c[i];
                        ci.innerHTML = ci.children[0].value;
                    }
                    row.innerHTML = "修改";
                }
            },
            del: function(table, row) {
                var ind = row.parentElement.parentElement.rowIndex;
                table.tBodies[0].deleteRow(ind);
            }
        }
    </script>
</head>

<body>
    <fieldset class="wrap">
        <legend>学生信息列表</legend>
        <div>
            <input type="text" id="a" />
            <input type="text" id="b" />
            <input type="text" id="c" />
            <input type="text" id="d" />
            <input type="text" id="e" />
            <input type="button" value="添加" onclick="yugi.addRow(table)" />
        </div>
        <table id="table">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>学历</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
        </table>
    </fieldset>
</body>

</html>