JS对html表格数据进⾏增删改JS对html表格数据进⾏增删改
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<button onclick="showInfo()">添加</button>
<button onclick="getSelectEl()">删除</button>html表格元素
<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 = ElementById("tab1");
var code =1;
var row;
function showInfo(){
var divInfo = ElementById("divInfo");
//判断该层是否显⽰，显⽰则隐藏，隐藏则显⽰
divInfo.style.display = divInfo.style.display=="none"?"block":"none";
// console.log(divInfo.style.display);
}
function addInfo(){
//得到⽂本框中的值
var name = ElementById("txtName").value;
var sex = ElementById("selSex").value;
var age = ElementById("txtAge").value;
// console.log(name,sex,age);
//创建新元素
var tr = ateElement("tr");
id ="tr"+code;
tr.setAttribute("id",id);
var td1 = ateElement("td");
var td2 = ateElement("td");
var td3 = ateElement("td");
var td4 = ateElement("td");
var td5 = ateElement("td");
var td6 = ateElement("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 = ElementById(id);
}
//编辑信息，把表格中的信息传递到⽂本框内
function edit(el){
row = el;//保存要编辑的是哪⾏
var name = el.childNodes[2].innerHTML;
var sex = el.childNodes[3].innerHTML;
var age = el.childNodes[4].innerHTML;
//更改按钮的⽂字，把按钮调⽤的⽅法改为修改的⽅法
//确认修改，修改表格中的信息
function editSave(){
var name = ElementById("txtName").value;
var sex = ElementById("selSex").value;
var age = ElementById("txtAge").value;
// console.log(row);
row.childNodes[2].innerHTML = name;
row.childNodes[3].innerHTML = sex;
row.childNodes[4].innerHTML = age;
//得到复选框勾选的的都有那⾏，点击上⾯的删除会把选中的信息依次删除掉  function getSelectEl(){
var cks = Array.ElementsByTagName("input"));
cks.forEach(ck=>{
if(ck.checked){
}
});
}
//删除所有，直接把表格中的代码变成""，即可达到删除效果
function delAll(){
tab1.innerHTML="";
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。