用JavaScript写的动态表格

实现的功能有Table表格添加，删除。输入，删除的全选，单行删除。

HTML代码部分

<body>
<form>
    <table border="1" align="center" width="300px" height="200">
        <tr>
            <td><center><strong>编号</strong></center></td>
            <td><input type="text" id="id"></td>
        </tr>
        <tr>
            <td><center><strong>姓名</strong></center></td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td><center><strong>密码</strong></center></td>
            <td><input type="text" id="pass"></td>
        </tr>
        <tr>
            <td><center><strong>邮箱</strong></center></td>
            <td><input type="text" id="address"></td>
        </tr>
        <tr>
            <td colspan="2">
                <center>
                    <input type="reset" value="重置">
                    <input type="button" value="添加" onClick="add()">
                </center>
            </td>
        </tr>
    </table>
</form>
    <hr>
    <table border="1" width="400" align="center">
        <thead>
            <tr>
                <td>
                    <center>
                    <input type="checkbox" name="all" onClick="checkall()">
                    <input type="button" onClick="del()" value="删除">
                    </center>
                </td>
                <td><center><strong>编号</strong></center></td>
                <td><center><strong>姓名</strong></center></td>
                <td><center><strong>密码</strong></center></td>
                <td><center><strong>邮箱</strong></center></td>    
            </tr>
        </thead>
        <tbody id="list">
        </tbody>
    </table>
</body>

JavaScript部分

    <script type="text/javascript">
        function add(){
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var pass = document.getElementById("pass").value;
            var address = document.getElementById("address").value;
            
            var tr = document.createElement("tr");
            tr.setAttribute("align","center");
            var td0 = document.createElement("td");
            var input = document.createElement("input");
            input.setAttribute("type","checkbox");
            input.setAttribute("name","item");
            input.setAttribute("onClick","selectItem()");
            td0.appendChild(input);
            var td1 = document.createElement("td");
            td1.innerHTML=id;
            var td2 = document.createElement("td");
            td2.innerHTML=name;
            var td3 = document.createElement("td");
            td3.innerHTML=pass;
            var td4 = document.createElement("td");
            td4.innerHTML=address;
            
            tr.appendChild(td0);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            
            var tbody = document.getElementById("list");
            tbody.appendChild(tr);
        }
        function checkall(){
            var inputall = document.getElementsByName("all")[0];
            var inputarr = document.getElementsByName("item");
            for(var i = 0;i<inputarr.length;i++){
                inputarr[i].checked = inputall.checked;
            }
        }
        function selectItem(){
            var inputall = document.getElementsByName("all")[0];
            var inputarr = document.getElementsByName("item");
            var sum = 0;
            for(var i = 0;i<inputarr.length;i++){
                if(inputarr[i].checked){
                    sum += 1;
                }
            }
            if(inputarr.length==sum){
                inputall.checked = true;    
            }else{
            inputall.checked = false;    
            }
        }
        function del(){
            var inputarr = document.getElementsByName("item");
            var tbody = document.getElementById("list");
            for(var i=inputarr.length-1;i>=0;i--){
                if(inputarr[i].checked){
                    tbody.removeChild(inputarr[i].parentNode.parentNode);
                }
            }    
        }
    </script>

用JavaScript写的动态表格

猜你喜欢