※※※例子
例五:
需求1:为#employeetable的所有的a节点添加Onclick响应函数:
1.弹出确认对话框confirm:确定要删除xx的信息吗?xx为当前a节点所在的td所在的tr的第一个td子节点的文本值,且要去除前面空格。
2.若点击确认,则删除a节点所在的行。
*注意:
1.a节点是一个超级链接,可以在其onclick事件中通过返回false来取消其默认行为。
2.tr的直接父节点为tbody,而不是table
3.可以把去除前后空格的代码写成一个trim(str)函数。
需求2:为#addEmpButton添加onclick响应函数:
1.获取#name,#email,#salary的文本框的值
2.利用1获取的文本值创建三个td节点,再创建一个tr节点,并把以上三个td节点加为tr节点的子节点
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
</tr>
3.再创建一个td节点:<td><ahref="deleteEmp?id=xxx">Delete</a></td>
4.把3创建的td也加为tr的子节点。
5.再把tr加为#employeetable的tbody子节点的子节点。
6.为新创建的tr的a子节点添加Onclick响应函数,使其也具备删除的功能。
window.οnlοad=function(){
function removeTr(aNoe){
var trNode=aNoe.parentNode.parentNode;
var textContent=trNode.getElementsByTagName("td")[0]
.firstChild.nodeValue;
textContent=trim(textContent);
var flag=confirm("确定要删除"+textContent+"的信息吗?")
if(flag){
trNode.parentNode.removeChild(trNode);
}
//取消默认行为
return false;
}
var aNodes=document.getElementById("employeetable")
.getElementsByTagName("a");
for(var i=0;i<aNodes.length;i++){
aNodes[i].οnclick=function(){
removeTr(this);
//取消默认行为
return false;
}
}
document.getElementById("addEmpButton").οnclick=function(){
//value用于获取html表单元素的值,nodeValue用于获取文本节点的文本值
var nameVal=document.getElementById("name").value;
var emailVal=document.getElementById("email").value;
var salaryVal=document.getElementById("salary").value;
var nameTd=document.createElement("td");
nameTd.appendChild(document.createTextNode(nameVal));
var emailTd=document.createElement("td");
emailTd.appendChild(document.createTextNode(emailVal));
var salaryTd=document.createElement("td");
salaryTd.appendChild(document.createTextNode(salaryVal));
var tr=document.createElement("tr");
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
alert("aa");
var aNode=document.createElement("a");
aNode.href="deleteEmp?id=xxx";
aNode.appendChild(document.createTextNode("Delete"));
var aTd=document.createElement("td");
aTd.appendChild(aNode);
tr.appendChild(aTd);
aNode.οnclick=function(){
removeTr(this);
return false;
}
document.getElementById("employeetable")
.getElementsByTagName("tbody")[0]
.appendChild(tr);
}
function trim(str){
var reg=/^\s*|\s*$/g;
return str.replace(reg,"");
}
}
十二、插入节点
12.1insertBefore():把一个给定节点插入到一个给定元素节点的给定子节点的前面
varreference=element.insertBefore(newNode,targetNode);
节点newNode将被插入到元素节点element中并出现在节点targetNode的前面,节点targetNode必须是element元素的一个子节点。
12.2自定义insertAfter():
function insertAfter(newNode,refNode){
//1.测试refNode是否为其父节点的最后一个子节点
var parentNode=refNode.parentNode;
if(parentNode){
var lastNode=parentNode.lastChild;
//2.若是:直接把newNode插入为refNode父节点的最后一个子节点
if(refNode==lastNode){
parentNode.appendChild(newNode);
}
//3.若不是:获取refNode的下一个兄弟节点,然后插入到其下一个兄弟节点的前面
else{
var nextNode=refNode.nextSibling;//下一个兄弟
parentNode.insertBefore(newNode,nextNode);
}
}