动态表格 

<body>
<form action="javascript:void(0);">
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <button id="add">添加</button>
</form>

<table>
    <caption>学生信息表</caption>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>操作</td>
    </tr>
    
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>性别</td>
        <td><a href="javascript:void(0);" onclick="deleteRow(this)">删除</a></td>
    </tr>
    
</table>

<script>
    document.getElementById("add").onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        var table = document.getElementsByTagName("table")[0];
        table.innerHTML +="<tr>\n" +
            "        <td>"+id+"</td>\n" +  //这里不需要转义""
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" onclick=\"deleteRow(this)\">删除</a></td>\n" +
            "    </tr>";
    }
    
    function deleteRow(obj) {
        var tr = obj.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
    }
</script>
</body>

 

<body>
<form action="javascript:void(0);">
    <input type="text" placeholder="请输入编号">
    <input type="text" placeholder="请输入姓名">
    <input type="text" placeholder="请输入性别">
    <button id="add">添加</button>
</form>
    
<table>
    <caption>学生信息表</caption>
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="tbody1">
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>性别</td>
            <td><a href="javascript:void(0);" onclick="deleteRow(this)">删除</a></td>
        </tr>
    </tbody>
</table>

<script>
    var btn_add = document.getElementById("add");
    btn_add.onclick = function () {
        var inputs = document.getElementsByTagName("input");
        
        var tbody = document.getElementById("tbody1");
        var tds = tbody.childNodes[1].childNodes;

        var newtr = document.createElement("tr");
        for(var i=0;i<inputs.length;i++){
            var td = document.createElement("td");
            td.innerHTML=inputs[i].value;
            newtr.appendChild(td);
        }
        var td_del = document.createElement("td");
        td_del.innerHTML="<a href=\"javascript:void(0);\" onclick=\"deleteRow(this)\"/>删除</a>";
        newtr.appendChild(td_del);
        tbody.appendChild(newtr);
    }
    
    function deleteRow(obj) {
        var tr = obj.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
    }
</script>
</body>

 

posted @ 2018-11-24 20:48  payn  阅读(167)  评论(0)    收藏  举报