2017年5月14日，在web組的第六週正式結束，這周的主要內容是學習JS，並且用JS實現增刪查改，各效果已實現，但查找功能還需完善（查找的內容所在列的背景顏色爲紅色，但多次查詢後前面的查詢仍然爲紅色，並且未輸入任何值的時候會選中全部行）。本週總結着重對增刪查改涉及到的知識點進行梳理。
1.增加：
a.創建元素結點：
document.createElement("tr");
b.給元素結點的最後一個子節點後添加B結點：
A.appendChild(B);
2.刪除：
刪除元素（=移除其父結點的子結點）
removeChild() 方法可從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。
3.查找：
匹配字符串，實現查找功能：
str1.search(str2)返回與正則表達式查找內容匹配的第一個字符串的位置，？？？？？？？？？？-1代表？
4.修改：
將文本框輸入的值複製給對應單元格的innerHTML中，即可完成修改。
存在的問題：
1.查找功能需要完善；
2.如何使得輸入文本的文本框在失去焦點後顯示初始狀態；
3.對DOM模型要多加熟悉與瞭解；
代碼：
//實現行顏色不同***********************************
var table=document.getElementById("table");
for (var j = 0; j < table.tBodies[0].rows.length; j++)
{
if (j % 2 == 0)
{
table.tBodies[0].rows[j].style.background = "#ebebeb";
}
else
{
table.tBodies[0].rows[j].style.background = "#ccc";
}
}
var user=document.getElementById("user");
var age=document.getElementById("age");
var add=document.getElementById("add");
var find=document.getElementById("find");
var num=table.tBodies[0].rows.length;
//查找***********************************
find.οnclick=function()
{
for (var n = 0; n < table.tBodies[0].rows.length; n++)
{
var str1 = table.tBodies[0].rows[n].cells[1].innerHTML.toLowerCase();
var str2 = user.value.toLowerCase();
if (str1.search(str2) != -1)
{
table.tBodies[0].rows[n].style.background = "red";
}
}
};
//添加***********************************
add1.οnclick=function()
{
var tr=document.createElement("tr");
var td1=document.createElement("td");
td1.innerHTML=++num;
if (num % 2==0)
{
tr.style.backgroundcolor="#ccc";
}
else
{
tr.style.backgroundcolor="#ebebeb";
}
var td2=document.createElement("td");
td2.innerHTML=user.value;
var td3=document.createElement("td");
td3.innerHTML=age.value;
var td4=document.createElement("td");
td4.innerHTML='<input type="button" value="刪除" οnclick="delRow(this)"><input type="button" value="修改" οnclick="changeRow(this)">';
table.tBodies[0].appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
};
//刪除***********************************
function delRow(obj)
{
if (confirm("您確定刪除嗎？"))
{
var Row=obj.parentNode.parentNode;
// while(Row.tagName.toLowerCase()!="tr")
// {
// Row=Row.parentNode;
// }
Row.parentNode.removeChild(Row);
}
};
//修改***********************************
function changeRow(obj)
{
var No=obj.parentNode.parentNode.rowIndex;
if (confirm("您要修改姓名嗎？\t\n(按確定可選擇是否修改姓名，\t\n按取消可選擇是否修改年齡)"))
{
var text=prompt("請輸入姓名：");
table.tBodies[0].rows[No-1].cells[1].innerHTML=text;
}
else
{
var text=prompt("請輸入年齡：");
table.tBodies[0].rows[No-1].cells[2].innerHTML=text;
}
}