【Summary】——>Web组·Week6

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;
	 }
}