怎么用JS做一个表格的增删改查

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

就烦条0o
2017-07-12 · 知道合伙人软件行家

就烦条0o
知道合伙人软件行家

采纳数：33315 获赞数：46492

从事多年系统运维，喜欢编写各种小程序和脚本。

向TA提问私信TA

关注

展开全部

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
    <table id="tab" width="400px" border="1px">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </table>
    <hr>
    <form name="myform" action="" onsubmit="return false">
        姓名： <input type="text" name="user"><br>
        年龄： <input type="number" name="age"><br>
        性别： <input type="text" name="sex"><br>
    <br>
    <button onclick="getMessage()">提交</button>
    </form>
    <script>
        var tab = document.getElementById('tab');
        var user = document.myform.user;
        var age = document.myform.age;
        var sex = document.myform.sex;
        function getMessage(){
                //创建行
            var tr = tab.insertRow(tab.rows.length);
            tr.insertCell(0).innerHTML = user.value;
            tr.insertCell(1).innerHTML = age.value;
            tr.insertCell(2).innerHTML = sex.value;
            tr.insertCell(3).innerHTML = '<button onclick="del(this)">删除</button>';
        }
        function del(n){
            var index = n.parentNode.parentNode.rowIndex;
            console.log(index);
            tab.deleteRow(index);
        }
    </script>
</body>
</html>