代码如下，复制可用，但是你要主意JS引入路径，自己改
你需要新建一个html文件，复制下面html代码进去，然后创建一个JS文件夹，在这个文件夹里新建JS文件，同样复制进去即可
重点：引入的时候JS文件名字和引入路径，未必一样，自己改改就行
HTML代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
#box{
width: 600px;height: 600px;
margin: 100px auto;
}
table{width:100%;border:1px solid #ccc;border-spacing:0;border-collapse: collapse;text-align: center;}
table td{border:1px solid #ccc;}
</style>
</head>
<body>
<div id="box">
</div>
//此处要改路径
<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
JS代码
var box = document.getElementById('box');
var arr = [
["姓名", "昵称", "年龄", "性别", "爱好"],
["刘备", "小刘", 58, "男", "吃饭睡觉玩游戏1"],
["关羽", "官二", 47, "男", "吃饭睡觉玩游戏2"],
["张飞", "张三", 45, "男", "吃饭睡觉玩游戏3"],
["小乔", "乔二", 18, "女", "吃饭睡觉"],
["熊大", "狗熊", 5, "男", "康师傅红烧方便面"],
];
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tdd2 = document.createElement("td");
for (var i = 0; i < arr.length; i++) {
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerHTML = '<input type="checkbox" value="删除" class="xz">';
var tdd = document.createElement("td");
if (i == 0) {
tdd.innerHTML = "#";
} else {
tdd.innerHTML = i;
}
tr.appendChild(td);
tr.appendChild(tdd);
for (var j = 0; j < arr[i].length; j++) {
var td = document.createElement("td");
td.innerHTML = arr[i][j];
tr.appendChild(td);
}
var td = document.createElement("td");
td.innerHTML = '<input type="button" value="×" class="delBtn">';
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
}
box.appendChild(table);
var delBtn = document.getElementsByClassName("delBtn");
for (var i = 1; i < delBtn.length; i++) {
delBtn[i].onclick = function () {
var currentTr = this.parentElement.parentElement;
currentTr.parentElement.removeChild(currentTr);
//实现点击按钮排序
for (var y = 1; y < delBtn.length; y++){
tbody.children[y].children[1].innerHTML = y;
}
}
}
delBtn[0].style.display = "none";
var span1 = document.createElement('span');
span1.innerHTML = "操作";
delBtn[0].parentElement.appendChild(span1);
var ak47 = tbody.firstElementChild;
ak47.style.fontWeight = "700";
//全选
window.onload = function () {
var tab = document.querySelectorAll(".xz");
var stab = document.querySelector(".xz");
stab.onclick = function () {
for (var e = 0; e < tab.length; e++) {
if (e >= 1) {
tab[e].checked = "checked";
//当下面的被点击时 控制全选按钮,解除全选
tab[e].onclick = function () {
if (stab.checked) {
stab.checked = false;
}
//当下面的全都选中了,控制点击按钮自动表现为全选
var ad = 0;
for (var s = 0; s < tab.length; s++) {
if (tab[s].checked) {
ad++;
}
}
if (ad == tab.length - 1) {
stab.checked = true;
ad = 0;
}
}
//全选状态下,点击全选按钮实现反选
if (stab.checked == true) {
for (var n = 0; n < tab.length; n++) {
tab[n].checked = false;
}
} else {
for (var n = 0; n < tab.length; n++) {
tab[n].checked = true;
}
}
}
}
}
}
效果器如下，样式不复杂，自己改一下，很简单。
