JS对html表格数据进行增删改
效果图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<button onclick="showInfo()">添加</button>
<button onclick="getSelectEl()">删除</button>
<button onclick="delAll()">删除全部</button>
</div>
<div id="divInfo">
<p>
姓名:<input id="txtName" type="text" />
</p>
<p>
性别:<select id="selSex">
<option>男</option>
<option>女</option>
<option>未知</option>
</select>
</p>
<p>
年龄:<input id="txtAge" type="text" />
</p>
<p>
<button id="butOk" onclick="addInfo()">确认添加</button>
</p>
</div>
<div>
<table width="400px" border="1px" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox"/></th>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th></th>
</tr>
</thead>
<tbody id="tab1"></tbody>
</table>
</div>
</body>
<script>
var tab1 = document.getElementById("tab1");
var code = 1;
var row;
function showInfo(){
var divInfo = document.getElementById("divInfo");
//判断该层是否显示,显示则隐藏,隐藏则显示
divInfo.style.display = divInfo.style.display=="none"?"block":"none";
// console.log(divInfo.style.display);
}
function addInfo(){
//得到文本框中的值
var name = document.getElementById("txtName").value;
var sex = document.getElementById("selSex").value;
var age = document.getElementById("txtAge").value;
// console.log(name,sex,age);
//创建新元素
var tr = document.createElement("tr");
id = "tr"+code;
tr.setAttribute("id",id);
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var td5 = document.createElement("td");
var td6 = document.createElement("td");
//往元素中添加内容
td1.innerHTML = "<input type='checkbox'/>";
td2.innerHTML = code;
td3.innerHTML = name;
td4.innerHTML = sex;
td5.innerHTML = age;
td6.innerHTML = "<button οnclick='edit(this.parentNode.parentNode)'>编辑</button><button οnclick='delById(\""+id+"\")'>删除</button>";
//把元素依次添加进去
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
tab1.appendChild(tr);
code++;//id自增
}
// 删除信息
function delById(id){
var tr = document.getElementById(id);
tab1.removeChild(tr);
}
//编辑信息,把表格中的信息传递到文本框内
function edit(el){
row = el;//保存要编辑的是哪行
var name = el.childNodes[2].innerHTML;
var sex = el.childNodes[3].innerHTML;
var age = el.childNodes[4].innerHTML;
document.getElementById("txtName").value = name;
document.getElementById("selSex").value = sex;
document.getElementById("txtAge").value = age;
//更改按钮的文字,把按钮调用的方法改为修改的方法
document.getElementById("butOk").innerHTML = "确认修改";
document.getElementById("butOk").setAttribute("onclick","editSave()");
}
//确认修改,修改表格中的信息
function editSave(){
var name = document.getElementById("txtName").value;
var sex = document.getElementById("selSex").value;
var age = document.getElementById("txtAge").value;
// console.log(row);
row.childNodes[2].innerHTML = name;
row.childNodes[3].innerHTML = sex;
row.childNodes[4].innerHTML = age;
document.getElementById("butOk").innerHTML = "确认添加";
document.getElementById("butOk").setAttribute("onclick","addInfo()");
}
//得到复选框勾选的的都有那行,点击上面的删除会把选中的信息依次删除掉
function getSelectEl(){
var cks = Array.from(tab1.getElementsByTagName("input"));
cks.forEach(ck=>{
if(ck.checked){
tab1.removeChild(ck.parentNode.parentNode);
}
});
}
//删除所有,直接把表格中的代码变成"",即可达到删除效果
function delAll(){
tab1.innerHTML="";
}
</script>
</html>