花了兩天完善了這個表格的功能，還是很滿意的了
<!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() ? ?使用正則表達式去判斷空白節(jié)點 是空白返回ture 不是就返回false
? ? ? ? // document.write(/^\s+$/.test(" ")); 結(jié)果是ture ?
? ? ? ? // document.write(/^\s+$/.test(" 1")); 結(jié)果是 false ?
? ? ? ? //Delete blank nodes ?刪除空白節(jié)點
? ? ? ? function Debnode(parent) {
? ? ? ? ? ? var nodes = parent.childNodes;
? ? ? ? ? ? for (var i = nodes.length - 1; i >= 0; i--) {
? ? ? ? ? ? ? ? //這里需要倒著來篩選 因為正著來遇到空白節(jié)點將其刪除后，后面的節(jié)點會前移，會影響之后的節(jié)點的下標。倒著來就不會了
? ? ? ? ? ? ? ? if (nodes[i].nodeType === 3 && /^\s+$/.test(nodes[i].nodeValue)) {
? ? ? ? ? ? ? ? ? ? parent.removeChild(nodes[i]);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? for (i = 0; i < trNode.length; i++) {
? ? ? ? ? ? Debnode(trNode[i]);
? ? ? ? }
????????/*之所以要刪除空白節(jié)點是因為：
? ? ? ? 1.原h(huán)tml文檔生成的表格中，tr與td，或者td與td之間存在空白節(jié)點，雖然IE瀏覽器會忽略這些空白節(jié)點，
? ? ? ? 但是其他瀏覽器不會，而且格式化后的 html表格文檔必然是上面這種格式 ↑，也就是說必帶空白節(jié)點。
? ? ? ? 2.用Js生成新的tr與td后，這些新的節(jié)點相互之間并不存在空白節(jié)點，且與 html文檔生成的節(jié)點之間也沒有空白節(jié)點。
? ? ? ? 兩者的差異導致 — —選取表格中的元素會很麻煩，空白節(jié)點會礙事。
? ? ? ? 所以，不管是從瀏覽器間的兼容性考慮，還是為了后續(xù)選取表格元素的方便，必須要進行格式上的統(tǒng)一
? ? ? ? 要么在js生成的每一個tr、td節(jié)點前面加一個空白節(jié)點，要么直接清除所有的空白節(jié)點。我當然選后者了(畢竟方便嘛，還能降低bug率，，，呃，好吧，其實是我不會加空白節(jié)點，網(wǎng)上查了好久翻了一堆資料，也試了好久，還是失敗了QAQ)。
? ? ? ? 且不只是表格節(jié)點，列表節(jié)點也是同理，所以清除空白節(jié)點還是很有必要噠！*/
? ? ? ? // 鼠標移動改變背景,可以通過給每行綁定 鼠標移上事件 和 鼠標移除事件 來改變所在行的背景色。
? ? ? ? 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();
? ? ? ? //新建一行數(shù)據(jù)的前提判斷條件(id)
? ? ? ? function judgeId() {
? ? ? ? ? ? newid = prompt("請輸入你的學號:(>=1 and <=999 & 不可重復)");
? ? ? ? ? ? if (newid == "") {
? ? ? ? ? ? ? ? alert("請輸入您的學號");
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? } else if (newid == null) {
? ? ? ? ? ? ? ? alert("您取消了操作");
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? } else if(isNaN(newid) == true){
? ? ? ? ????????alert("請輸入您的數(shù)字學號");
? ? ? ? ????????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是否重復，根據(jù)返回的值做不同的判斷處理
? ? ? ? ? ? ? ? ? ? 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();
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 動態(tài)在表格添加子節(jié)點;
? ? ? ? function insert() {
? ? ? ? ? ? //新建節(jié)點并賦值
? ? ? ? ? ? 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)");
? ? ? ? ? ? //判斷新節(jié)點插入的位置（行）
? ? ? ? ? ? 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)后，插入剩下的節(jié)點(td、a)
? ? ? ? ? ? newtr.appendChild(newtd1);
? ? ? ? ? ? newtr.appendChild(newtd2);
? ? ? ? ? ? newtr.appendChild(newtd3);
? ? ? ? ? ? newtd3.appendChild(newhref);
? ? ? ? ? ? //將變量值恢復初始值/清空
? ? ? ? ? ? a = 0;
? ? ? ? ? ? b = 0;
? ? ? ? ? ? oldid = "";
? ? ? ? ? ? newid = "";
? ? ? ? ? ? myname = "";
? ? ? ? ? ? changeColor();
? ? ? ? }
? ? ? ? // 創(chuàng)建刪除函數(shù)
? ? ? ? function remove(obj) {
? ? ? ? ? ? let tableNode = obj.parentNode.parentNode.parentNode;
? ? ? ? ? ? let trNode = obj.parentNode.parentNode;
? ? ? ? ? ? tableNode.removeChild(trNode);
? ? ? ? }
? ? </script>
</body>
</html>
2022-03-11
debug好累QAQ