用JavaScript写的动态表格
Posted 了了的时光机
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用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>
<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写的动态表格的主要内容，如果未能解决你的问题，请参考以下文章
用 JavaScript 中的 JSON 数据动态填充表格的快速方法
动态创建表格怎么用CSS设置表格属性 我是初学着，急用。我的代码如下 但是表格显示不出来
javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格