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