用JavaScript寫的動態表格
阿新 • • 發佈:2018-12-27
實現的功能有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>