一 选中多个数据进行删除&&添加数据
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选多选</title>
<!--做一些修饰,自行定义-->
<style>
tr {
text-align: center;
}
tr td:first-child {
width: 50px;
}
</style>
</head>
<body>
<!--<form>-->
<!--先创建初始的数据-->
<table border="1" width="400px" align="center" id="tab_a">
<tr>
<td colspan="4">
<!--添加按钮-->
<button onclick="addData()">添加</button>
<!--批量删除按钮-->
<button onclick="deleteData()">批量删除</button>
</td>
</tr>
<tr>
<th>
<!--全选按钮-->
<input type="checkbox" name="checkAll" id="checkAll" onchange="checkedAll()" />
</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td></td>
<td>六一</td>
<td>24</td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td></td>
<td>张二</td>
<td>24</td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td></td>
<td>李三</td>
<td>21</td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td></td>
<td>王四</td>
<td>31</td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td></td>
<td>小六</td>
<td>27</td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td></td>
<td>二七</td>
<td>22</td>
</tr>
</table>
<!--</form>-->
</body>
</thml>
js代码
<script>
//获取全选按钮
var checkAll = document.getElementById("checkAll");
//获取所有的单选项
var checkArray = document.getElementsByName("check");
//获取表格
var tab_a = document.getElementById("tab_a").children[0];
//tab_a.rows(获取有多少行)
var trArray = tab_a.rows;
function ids() {
//定义编号
let id = 0;
//除去标题,给每一行添加上id编号
for(let i = 2; i < trArray.length; i++) {
trArray[i].cells[1].innerText = ++id;
}
}
//渲染每一行的id编号
ids();
//全选按钮
function checkedAll() {
//全选
if(checkAll.checked) {
for(let i = 0; i < checkArray.length; i++) {
checkArray[i].checked = true;
}
}
//全不选
if(!checkAll.checked) {
for(let i = 0; i < checkArray.length; i++) {
checkArray[i].checked = false;
}
}
}
//添加数据
function addData() {
//获取表格最后一行里面的数据 .cells(获取所有的列)
let tdArray = trArray[trArray.length - 1].cells;
//获取最后一行里面的编号,那么下一行的编号就可以在他的基础上加1
let idNew = tdArray[1].outerText;
//当所有的数据被清空,tdArray[1].outerText就不在是数字,手动修改
if(isNaN(idNew)) {
idNew = 0;
}
//获取输入的信息
let name = prompt("请输入姓名");
let age = prompt("请输入年龄");
//创建tr标签
let trTab = document.createElement("tr");
for(let i = 0; i < tdArray.length; i++) {
//创建td标签
let tdTab = document.createElement("td");
//向行内添加单元格
trTab.appendChild(tdTab);
}
//获取所有的td tdA为td的集合
let tdA = trTab.cells;
//创建选择框 给上type 和 name属性
let inp = document.createElement("input");
inp.setAttribute("type", "checkbox");
inp.setAttribute("name", "check");
tdA[0].appendChild(inp);
tdA[1].innerHTML = ++idNew; //编号加1
tdA[2].innerHTML = name;
tdA[3].innerHTML = age;
//向表格内添加行
tab_a.appendChild(trTab);
}
// //删除数据
// function deleteData(){
// //获取有多少行
// let trArray1 = tab_a.rows;
// //终止条件
// if(trArray1.length == 2){
// return ;
// }
// for (let i=2; i<trArray1.length; i++) {
console.log(trArray[i].cells[0].children[0].checked);
// //trArray[i].cells[0] 获取当前行的第一个td
// //.children[0]获取td里面的第一个子标签,input
// //.checked 获取是否被选中,选中返回true,未选中返回fasle
// if(trArray1[i].cells[0].children[0].checked){
// //当复选框被选中时删除tr
// tab_a.removeChild(trArray1[i]);
// //删除当前行,他的下一行移到了当前的位置,但是i++之后,不会再走到这一行
// //使用i-- 在退回到这一行做一次判断
// i--;
// }
// }
// //删除完之后,多选框取消选定状态
// if(checkAll.checked){
// checkAll.checked = false;
// }
// ids();
// }
//删除数据
function deleteData() {
//循环所有的选项
for(let i = 0; i < checkArray.length; i++) {
//判断是否被选中
if(checkArray[i].checked) {
//当复选框被选中时进行删除
//获取最高的节点
let tbody = checkArray[i].parentNode.parentNode.parentNode;
//获取被选中的这一行
let tr = checkArray[i].parentNode.parentNode
//进行删除
tbody.removeChild(tr);
//删除当前行,他的下一行移到了当前的位置,但是i++之后,不会再走到这一行
//使用i-- 在退回到这一行做一次判断
i--;
}
}
//删除完之后,多选框取消选定状态
if(checkAll.checked) {
checkAll.checked = false;
}
ids();
}
</script>
效果图
二 添加数据,单个删除数据
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加信息</title>
<!--做一些修饰,自行定义-->
<style>
*{
margin: 10px auto;
padding: 0px auto;
}
div{
width: 800px;
text-align: center;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<!--添加信息-->
学号: <input type="text" name="id" id="id"/>
姓名: <input type="text" name="name" id="name"/>
年龄: <input type="text" name="age" id="age" />
<br />
<!--添加按钮-->
<button onclick="addData()">添加信息</button>
<p></p>
<!--初始数据-->
<table border="1" id="tab_a">
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>10000</td>
<td>张三</td>
<td>23</td>
<!--删除按钮,只删除这一行-->
<td><button onclick="deleteData(this)">删除</button></td>
</tr>
</table>
</div>
</body>
</html>
js代码
<script>
function addData(){
//获取学号
let id = document.getElementById("id").value;
//获取姓名
let name = document.getElementById("name").value;
//获取年龄
let age = document.getElementById("age").value;
//判断信息不为空值
if(id==""||name==""||age==""){
alert("请不要填写空信息");
return ;
}
//获取表格
let tab_a = document.getElementById("tab_a");
//获取表格内部表
let tbody = tab_a.children[0];
//根据标题可获取有多少列
let cellsLen = tbody.rows[0].cells.length;
//创建tr标签
let tr = document.createElement("tr");
//依次创建td标签
for(let i=0; i<cellsLen; i++){
//创建td标签
let td = document.createElement("td");
//将td标签添加到tr里
tr.appendChild(td);
}
//创建一个按钮
let but = document.createElement("button");
//创建文本内容
let textA = document.createTextNode("删除");
//将文本内容添加到按钮
but.appendChild(textA);
//给按钮添加属性
but.setAttribute("onclick","deleteData(this)");
//给每个td赋值
tr.cells[0].innerHTML = id;
tr.cells[1].innerHTML = name;
tr.cells[2].innerHTML = age;
//添加删除按钮
tr.cells[3].appendChild(but);
//添加到table里
tbody.appendChild(tr);
}
function deleteData(obj){
//parentNode返回父级节点
//obj.parentNode.parentNode.parentNode.removeChild 返回到table节点并进行删除
//obj.parentNode.parentNode 返回到tr节点
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}
效果图