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