1. 程式人生 > >用JavaScript寫的動態表格

用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>