花了两天完善了这个表格的功能，还是很满意的了
呜米的可爱
2022-03-11 11:45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>new document</title>
</head>
<body>
<table border="1" width="50%" id="table">
<tbody id="tbody">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="remove(this)">删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="remove(this)">删除</a></td>
</tr>
</tbody>
</table>
<input type="button" value="添加一行" onclick="judgeId()" />
<!--在添加按钮上添加点击事件 -->
<script type="text/javascript">
//定义全局变量
let trNode = document.getElementsByTagName("tr");
let newid;
let oldid;
let myname;
let a = 0;
let b = 0;
//1,/^\s+$/.test() 使用正则表达式去判断空白节点 是空白返回ture 不是就返回false
// document.write(/^\s+$/.test(" ")); 结果是ture
// document.write(/^\s+$/.test(" 1")); 结果是 false
//Delete blank nodes 删除空白节点
function Debnode(parent) {
var nodes = parent.childNodes;
for (var i = nodes.length - 1; i >= 0; i--) {
//这里需要倒着来筛选 因为正着来遇到空白节点将其删除后，后面的节点会前移，会影响之后的节点的下标。倒着来就不会了
if (nodes[i].nodeType === 3 && /^\s+$/.test(nodes[i].nodeValue)) {
parent.removeChild(nodes[i]);
}
}
}
for (i = 0; i < trNode.length; i++) {
Debnode(trNode[i]);
}
/*之所以要删除空白节点是因为：
1.原html文档生成的表格中，tr与td，或者td与td之间存在空白节点，虽然IE浏览器会忽略这些空白节点，
但是其他浏览器不会，而且格式化后的 html表格文档必然是上面这种格式 ↑，也就是说必带空白节点。
2.用Js生成新的tr与td后，这些新的节点相互之间并不存在空白节点，且与 html文档生成的节点之间也没有空白节点。
两者的差异导致 — —选取表格中的元素会很麻烦，空白节点会碍事。
所以，不管是从浏览器间的兼容性考虑，还是为了后续选取表格元素的方便，必须要进行格式上的统一
要么在js生成的每一个tr、td节点前面加一个空白节点，要么直接清除所有的空白节点。我当然选后者了(毕竟方便嘛，还能降低bug率，，，呃，好吧，其实是我不会加空白节点，网上查了好久翻了一堆资料，也试了好久，还是失败了QAQ)。
且不只是表格节点，列表节点也是同理，所以清除空白节点还是很有必要哒！*/
// 鼠标移动改变背景,可以通过给每行绑定 鼠标移上事件 和 鼠标移除事件 来改变所在行的背景色。
function changeColor() {
let i = 1; //表头不变化
for (i = 1; i < trNode.length; i++) {
trNode[i].onmouseover = function () {
this.style.backgroundColor = "#f2f2f2";
};
trNode[i].onmouseout = function () {
this.style.backgroundColor = "#fff";
};
}
}
changeColor();
//新建一行数据的前提判断条件(id)
function judgeId() {
newid = prompt("请输入你的学号:(>=1 and <=999 & 不可重复)");
if (newid == "") {
alert("请输入您的学号");
return;
} else if (newid == null) {
alert("您取消了操作");
return;
} else if(isNaN(newid) == true){
alert("请输入您的数字学号");
return;
}else {
if (newid < 1 || newid > 999) {
alert("请输入正确的学号");
return;
} else {
//格式化学号
if (newid > 0 && newid < 10) {
newid = "00" + newid;
} else if (newid >= 10 && newid <= 100) {
newid = "0" + newid;
} else {
newid = newid;
}
//判断学号id是否重复，根据返回的值做不同的判断处理
for (let i = 1; i < trNode.length; i++) {
oldid = JSON.stringify(trNode[i].childNodes[0].innerHTML).substring(3, 6);
if (parseInt(newid) == parseInt(oldid)) {
a = 1;
alert("学号ID重复,添加失败,请重新添加");
break;
} else {
continue;
}
}
oldid = "";
if (a == 0) {
judgeName();
} else {
a = 0;
newid = "";
judgeId();
}
}
}
}
//输入姓名的前提条件
function judgeName() {
myname = prompt("请输入你的姓名:(可重复&不可为空)");
if (myname == "") {
alert("请输入您的姓名");
judgeName();
} else if (myname == null){
alert("您取消了操作");
return;
} else {
insert();
}
}
// 动态在表格添加子节点;
function insert() {
//新建节点并赋值
let tbo = document.getElementById("tbody");
let newtr = document.createElement("tr");
let newtd1 = document.createElement("td");
let newtd2 = document.createElement("td");
let newtd3 = document.createElement("td");
let newhref = document.createElement("a");
newtd1.innerHTML = "xh" + newid;
newtd2.innerHTML = myname;
newhref.innerHTML = "删除";
newhref.setAttribute("href", "javascript:;");
newhref.setAttribute("onclick", "remove(this)");
//判断新节点插入的位置（行）
for (let i = 1; i < trNode.length; i++) {
oldid = JSON.stringify(trNode[i].childNodes[0].innerHTML).substring(3, 6);
if (parseInt(newid) < parseInt(oldid)) {
a = 1;
b = i;
break;
} else {
continue;
}
}
if (a == 1) {
tbo.insertBefore(newtr, trNode[b]);
} else {
tbo.appendChild(newtr);
}
//确定好位置(tr)后，插入剩下的节点(td、a)
newtr.appendChild(newtd1);
newtr.appendChild(newtd2);
newtr.appendChild(newtd3);
newtd3.appendChild(newhref);
//将变量值恢复初始值/清空
a = 0;
b = 0;
oldid = "";
newid = "";
myname = "";
changeColor();
}
// 创建删除函数
function remove(obj) {
let tableNode = obj.parentNode.parentNode.parentNode;
let trNode = obj.parentNode.parentNode;
tableNode.removeChild(trNode);
}
</script>
</body>
</html>
1回答
-
- 呜米的可爱
- 2022-03-11 11:48:49
debug好累QAQ
JavaScript进阶篇
468061 学习 · 21891 问题
相似问题
回答 5
回答 3