您的位置：首页 > Web前端 > JavaScript
js动态表格，留着复习动态添加元素

2014-06-27 11:24 260 查看
</pre><pre name="code" class="javascript"><!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>动态生成表格的创建</title>
<!--如果直接js放在这里，直接给按钮添加点击事件，就可能不会执行，因为在按照顺序，下面的button还没有创建
所以添加之后没有用，解决方法可以将js放在后面，也可以写在window.onload里面， 它会在dom节点完成之后再执行-->
<script type="text/javascript">
window.onload=function(){
//得到按钮元素节点，添加一个点击事件
var buttonElement = document.getElementById("add");
buttonElement.onclick=function(){
/** 目标格式：
* <tr align=center height=35px>
<td>张三</td>
<td>18</td>
<td>打篮球</td>
<td><a href="delete?id=">删除</a></td>
</tr>
*/
//得到要添加的值
var nameValue = document.getElementById("name").value;
var ageValue = document.getElementById("age").value;
var hobbyValue = document.getElementById("hobby").value;
//创建tr
var trElement = document.createElement("tr");
//为tr添加属性
trElement.setAttribute("align","center");
trElement.setAttribute("height","35px");
//创建td
var tdNameElement = document.createElement("td");
var tdAgeElement = document.createElement("td");
var tdHobbyElement = document.createElement("td");
var tdAElement = document.createElement("td");
//创建文本节点
var nameElement = document.createTextNode(nameValue);
var ageElement = document.createTextNode(ageValue);
var hobbyElement = document.createTextNode(hobbyValue);
//为td添加文本节点
tdNameElement.appendChild(nameElement);
tdAgeElement.appendChild(ageElement);
tdHobbyElement.appendChild(hobbyElement);
//添加a链接
var aElement = document.createElement("a");
aElement.setAttribute("href","delete?id="+nameValue);
aElement.innerHTML="删除";
//给a链接添加点击事件，实现删除功能
aElement.onclick=function(){
var flag = window.confirm("您真的要删除【 "+nameValue+" 】这条数据吗？？");
if(!flag){    //点击取消
return false;   //使链接失效
}
/**--------删除功能-----------**/
//得到a这条数据的tr
var deleteTr = this.parentNode.parentNode;
//得到tbody
var deleteTbody = this.parentNode.parentNode.parentNode;
deleteTbody.removeChild(deleteTr);
return false;    //使a链接的href失效
}
tdAElement.appendChild(aElement);
//为tr添加td元素节点
trElement.appendChild(tdNameElement);
trElement.appendChild(tdAgeElement);
trElement.appendChild(tdHobbyElement);
trElement.appendChild(tdAElement);
//为了兼容IE浏览器，添加tbody节点,并将tr添加到tbody
var tbodyElement = document.createElement("tbody");
tbodyElement.appendChild(trElement);
//得到table元素,将tbody添加到table
var tableElement = document.getElementById("usersInfo");
tableElement.appendChild(tbodyElement);
}

//给重置按钮添加点击事件
document.getElementById("clear").onclick=function(){
clear();
}
}

/**
* 重置函数，清空输入框中的数据
*/
function clear(){
document.getElementById("name").value="";
document.getElementById("age").value="";
hobbyValue = document.getElementById("hobby").value=""
}
</script>
</head>
<body>
<br/><br/>
<center>
姓名：<input type="text" id="name" name="name"/>
年龄：<input type="text" id="age" name="age"/>
爱好：<input type="text" id="hobby" name="hobby" />
<br/><br/>
<input type="button" name="add" id="add" value="添加记录"/>
<input type="button" name="clear" id="clear" value="重置"/>
<br/><br/>
<table id="usersInfo" width=600px border=1px bordercolor=blue>
<!--为了兼容IE浏览器，添加一个tbody-->
<tbody>
<tr align=center height=40px>
<td style="font-color:red;">姓名</td>
<td>年龄</td>
<td>爱好</td>
<td>操作</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： 动态表格 appendChild js表格
相关文章推荐
新的分享
章节导航