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