您的位置：首页 > Web前端 > JavaScript

元素js_存dom对象表格增删以及编辑

2015-01-24 22:58 309 查看
原生js增删以及编辑表格

今天学习了用Js动态的添加一行数据，具体需求和效果是，有三个（可以是多个）文本框让用户输入信息，这里以用户名，电话，地址，为例子，当用户点击确定提交的时候，吧用户输入的文本信息动态的添加到当前表格中，并为每行添加三个操作按钮，一个用于删除当前添加的信息(删除)，一个是用于修改当前添加的信息（修改），一个是用户保存用户修改以后的信息（保存），添加完当前行信息以后，情况当前用户输入的文本信息。

实现思路，首先在页面中添加一个<table>标签，<thead>,<tbody>,<tr>,等标签，然后给<tbody>给对应饿id（便于通过id找到该元素向该控件内动态的添加tr），当用户输入完整的信息（这里没做验证），动态的在<tbody>中添加一行数据（一个tr，并附带一个操作），具体实现，但用户提交数据的时候，首先把用户输入的数据一次保存到一个数组中，这里用数组的原因是考虑到当数据比较多的时候动态生成单元格（td）的时候方便，因为用户输入的每一个信息（姓名，电话，住址），在显示的时候都会已td的形式展现，所以在动态生成td的时候，如果没有特殊要求，可以把动态生成td放在for循环里面，这样方便且合理，只是在遍历的时候，改变td单元格的内容即可，所以这里吧用户输入的数据用数组保存起来，也是为了方便后期动态生成td做准备，前面的用户输入的数据可以直接遍历生成td，但后面的操作不能遍历，所以必须然数据遍历玩了以后再动态的想生成一个td，并想最后一个动态生成的td添加操作功能，删除，修改，和修改以后的保存，具体实现，动态生成三个a标签，通过，并给对应的a标签的innerHTMl赋上值值，然后在通过setAttribute方法吧a标签的href属性，链接到一个脚本协议，并返回一个false，这样啊标签的超链接的href属性就失效了，然后在给对应的a标签动态绑定单击事件。删除的单击事件最简单，通过当前（a标签）找到对应父便签（td），再找到父标签（tr），然后在通过<tbody>的id找到<tbody>(这就是当初为什么要给<tbody>给Id的原因，当然不给也行，你那就继续通过父子关系去找，我个人不建议这么做)，然后通过tbody去删除tr。修改旧最麻烦了，通过当前啊（a标签）找到父级父级（tr），然后获取tr下面的除了最后一个td（因为最后一个td是用来操作的）的所有td集合，然后遍历，给每个td动态的添加文本框，并把当前td的内容赋值给文本的value值，这样当前行（tr）就可以编辑了，修改内容以后，单击保存，和修改一样先获取出来当前tr先出了最后一个td的所有td集合，然后遍历，吧当前td下的文本框的值赋值给当前td，然后并清空当前td下的文本框，然后就ok了，

重点，难点：给三个操作标签动态绑定事件的时候，通过parentNode和childNodes找对象的时候一定要注意当前对象与需要找的对象的关系层级。

亮点：吧用户输入的数据通过数组保存起立，然后遍历动态生成td并添加到tr中，这样无论用户输入多少个数据（哪怕几百个），都不用我们手动的用代码生成对应的td，因为用数组，一数组长度为个个数，动态生成td即可。

细节：在编辑的和保存的时候一定要注意是的除了自己所在的td外，然后子啊获取所以的td集合，或者，获取所以的td，但只对自己的td不做任何操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.infoList{width:800px;margin:50px auto;border-collapse:collapse;}
.infoList th{text-align:center;border:1px solid #aaa;height:30px;}
.infoList td{text-align:center;border:1px solid #aaa;height:35px;}
.infoList td a{margin:0px 5px;}
.infoList td input[type="text"]{width:96%;height:100%;margin:0px 2%;border:none;text-align:center;}
.addInfo{width:800px;margin:20px auto;}
.addInfo div{text-align:center;margin:10px 0px;}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById('submitInfo').onclick=function(){
var infos=new Array();//创建一个数组，如果信息比较多的时候遍历生成td比较好
infos[0]=document.getElementById('userName').value;//吧用户名保存到数组
infos[1]=document.getElementById('tel').value;//吧电话号码保存到数组
infos[2]=document.getElementById('addres').value;//吧地址添加到数组
var trNode=document.createElement('tr');//生成tr
for(var i=0;i<infos.length;i++){
var tdNode=document.createElement('td');//生成td
tdNode.innerHTML=infos[i];//添加td文本内容
trNode.appendChild(tdNode);	//把生成的td添加到tr
}
var _tdNode=document.createElement('td');//生成操作td，删除
var aNode_delete=document.createElement('a');//生成操作a标签
aNode_delete.innerHTML='删除';//添加操作a标签文本
aNode_delete.setAttribute('href','javascript:return false');//添加操作a标签href属性
//操作a标签绑定单击事件
aNode_delete.onclick=function(){
//找到当前tr的父控件，并通过父控件删除当前tr
document.getElementById('editorInfo').removeChild(this.parentNode.parentNode)
}
var aNode_update=document.createElement('a');//生成操作a标签
aNode_update.innerHTML='修改';//添加操作a标签文本
//aNode_update.
aNode_update.setAttribute('href','javascript:return false');//添加操作a标签href属性
//操作a标签绑定单击事件（修改）
aNode_update.onclick=function(){
this.innerHTML='修改';
var tds=this.parentNode.parentNode.childNodes;
for(var i=0;i<tds.length-1;i++){
var txt=document.createElement('input');
txt.setAttribute('type','text')	;
txt.setAttribute('value',tds[i].innerHTML);
//txt.value=tds[i].innerHTML
tds[i].innerHTML='';
tds[i].appendChild(txt);
}
}
var aNode_save=document.createElement('a');//生成操作a标签（保存）
aNode_save.innerHTML='保存';//添加操作a标签文本(保存
aNode_save.setAttribute('href','javascript:return false');//添加操作a标签href属性
//操作a标签绑定单击事件（保存）
aNode_save.onclick=function(){
//通过当前对象找到该父级（td）再父级(tr)，然后在找到tr先的input，遍历
var tds=this.parentNode.parentNode.childNodes;
//var inputs=this.parentNode.parentNode.getElementsByTagName('input');
for(var i=0;i<tds.length-1;i++){
tds[i].innerHTML=tds[i].getElementsByTagName('input')[0].value;
}
}
_tdNode.appendChild(aNode_delete);//把操作a标签添加到操作td(删除)
_tdNode.appendChild(aNode_update);//把操作a标签添加到操作td（修改）
_tdNode.appendChild(aNode_save);//把操作a标签添加到操作td（保存）
trNode.appendChild(_tdNode);//吧操作td添加到tr
document.getElementById('editorInfo').appendChild(trNode);//吧tr整体添加到tbody
document.getElementById('userName').value='';//清空用户名
document.getElementById('tel').value='';//情况电话号码
document.getElementById('addres').value='';//情况地址
}
}
</script>
</head>

<body>
<div class="addInfo">
<div>添加用户</div>
<div>
用户名：<input type="text" id="userName"   />   
电话：<input type="text" id="tel" />   
地址：<input type="text" id="addres" />
</div>
<div><input type="button" value="提交" id="submitInfo" /></div>

</div>
<table  class="infoList" id="info">
<thead>
<tr>
<th>姓名</th><th>电话</th><th>住址</th><th>操作</th>
</tr>
</thead>
<tbody class="infoBody" id="editorInfo">
<tr>
<td>张三</td><td>13733519184</td><td>上海，闵行</td><td><a href="#">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航