DOM操作表格
1.利用JavaScript动态增加、删除表格内容
页面如图
注:首先说个小问题，有些如制定按钮点击事件的js代码，放在html文档最后可以，放在最前面(<head>标签内)不可以，原因是html文档是自上往下读取，当读到最上面的js、代码时，并没有读取相应的DOM标签，所以制定的按钮功能没有效果，如果非要放在上面，可以指定到window.onload方法中去:
<head>
<span style="white-space:pre"> </span><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
<script language="javascript">
//window.onload执行规则:
//1.必须dom结构绘制完毕(整个html解析结束)之后才执行
//2.页面的所有关联的文件必须加载完毕
window.onload=function(){
//<button id="addUser">提交</button>
document.getElementById("addUser").onclick=function(){
alert("xxxx");
};
}
</script>
</head>
言归正传，咱们来实现刚刚说的动态增删表格功能
实现:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<center>
<br><br>
添加用户:<br><br>
姓名: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
电话: <input type="text" name="tel" id="tel" /><br><br>
<button id="addUser">提交</button>
<br><br>
<hr>
<br><br>
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=Jerry">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
<script language="javascript">
//window.onload执行规则:
//1.必须dom结构绘制完毕(整个html解析结束)之后才执行
//2.页面的所有关联的文件必须加载完毕
window.onload=function(){
//<button id="addUser">提交</button>
document.getElementById("addUser").onclick=function(){
/****************************************************/
//获取文本框的值
var name=document.getElementById("name").value;
var email=document.getElementById("email").value;
var tel=document.getElementById("tel").value;
/****************************************************/
//创建四个<td>，并加入文本值
var nameTd=document.createElement("td");
var nameText=document.createTextNode(name);
nameTd.appendChild(nameText);
var emailTd=document.createElement("td");
var emailText=document.createTextNode(email);
emailTd.appendChild(emailText);
var telTd=document.createElement("td");
var telText=document.createTextNode(tel);
telTd.appendChild(telText);
//创建超链接标签
var aTd=document.createElement("td");
var aElement=document.createElement("a");
aElement.setAttribute("href","deleteEmp?id="+name);
var deleteText=document.createTextNode("Delete");
aElement.appendChild(deleteText);
aTd.appendChild(aElement);
/****************************************************/
//创建<tr>
var trElement=document.createElement("tr");
//增加<td>到<tr>上
trElement.appendChild(nameTd);
trElement.appendChild(emailTd);
trElement.appendChild(telTd);
trElement.appendChild(aTd);
/****************************************************/
//增加<tr>到<table>上
var tableElement=document.getElementById("usertable");
//tableElement.appendChild(trElement);
//由于部分IE浏览器显示不正常，为了兼容性，添加到tbody标签上
//创建tbody，为了跨浏览器显示
var tbodyElement=document.createElement("tbody");
tbodyElement.appendChild(trElement);
//放置tbody到table上
tableElement.appendChild(tbodyElement);
/****************************************************/
//删除
aElement.onclick=function(){
//return false使网页的链接失效
return delTr(aElement);
}
/****************************************************/
function delTr(aELement){
var name=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
var flag=window.confirm("您真的要删除["+name+"]吗?");
//点击"取消"按钮
if(!flag){
return false;
}
/*删除*********************************************/
//获取tbody
var tbodyElement=aElement.parentNode.parentNode.parentNode;
//获取tr
var trElement=aElement.parentNode.parentNode;
//删除
tbodyElement.removeChild(trElement);
//使网页的链接失效
return false;
}
}
}
</script>
</html>
最终效果:
点击添加，添加成功！
点击"Delete"链接，删除成功！
转载请注明出处：http://blog.csdn.net/acmman/article/details/48010081
时间： 2024-08-02 07:28:07