代碼如下，複製可用，但是你要主意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;
}
}
}
}
}
}
效果器如下，樣式不復雜，自己改一下，很簡單。
