注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

使用JS操作table 增删改查  

2012-11-14 22:43:54|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 from :http://www.189works.com/article-78084-1.html

姓名年龄地址操作
王重阳60古墓删除  编辑
张三丰20武当山删除  编辑
新增
 
 
 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>用JS table实现增删改查</title>
<style type="text/css">
#divBody
{
width:900px;

margin:50px auto ;
}
#getTable
{
border-left:1px solid black;
border-top:1px solid black;
text-align:center;
margin:10px auto;
width: 618px;
height: 139px;
}

#getTable td
{
border-right:1px solid black;
border-bottom:1px solid black;
width:140px;
height:30px;
}
input[type="text"]
{
width:120px;
height:19px;
}
</style>

<script type="text/javascript">

function addRow() {
//增加一行

//得到当前行
var currRowIndex = event.srcElement.parentNode.parentNode.rowIndex;//当前行的行号
// var c = document.getElementById("getTable").rows.length;//得到插入前行的总数

var row = document.getElementById("getTable").insertRow(currRowIndex);//插入当前行
// var rowCount = document.getElementById("getTable").rows.length; //插入一行之后的行总数

//var countCell = document.getElementById("getTable").rows.item(0).cells.length;//每一行有多少个单元格

var currRow = event.srcElement.parentNode.parentNode;//当前行
//var tb = document.getElementById("getTable");//table对象


//以下方式 用来读取当前行 控件的值
var mess0 = currRow.cells(0).children[0].value;
var mess1 = currRow.cells(1).children[0].value;
var mess2 = currRow.cells(2).children[0].value;

var mess3 = currRow.cells(3).innerText;

if (mess0=="") {
alert("姓名不能为空");
return;
}
if (mess1 == "") {
alert("年龄不能够为空");
return;
}
if (mess2 == "") {
alert("地址不能为空");
return;
}

if (mess3 == "保存") {
//保存的本质是增加以后再删除
//alert("删除了这一行!");
document.all("getTable").deleteRow(currRowIndex + 1);
}

//以下方式 ,用来读取纯文本
// var mess0 = currRow.cells(0).innerText;
// var mess1 = currRow.cells(1).innerText;
// var mess2 = currRow.cells(2).innerText;

row.insertCell(0).innerHTML = mess0;
row.insertCell(1).innerHTML = mess1;
row.insertCell(2).innerHTML = mess2;
row.insertCell(3).innerHTML = "<a href='http://www.cnblogs.com/limiao/archive/2012/07/10/#' onclick='deleteRow()'>删除</a>&nbsp;&nbsp;<a href='http://www.cnblogs.com/limiao/archive/2012/07/10/#' onclick='editRow()'>编辑</a>";

}

function editRow() {
var currRowIndex = event.srcElement.parentNode.parentNode.rowIndex; //当前行的行号

var currRow = event.srcElement.parentNode.parentNode; //当前行
var mess0 = currRow.cells(0).innerText;
var mess1 = currRow.cells(1).innerText;
var mess2 = currRow.cells(2).innerText;

//修改,替换的本质是 删除然后在增加
document.all("getTable").deleteRow(currRowIndex);


var row = document.getElementById("getTable").insertRow(currRowIndex); //插入当前行
row.insertCell(0).innerHTML = "<input type='text' value='"+ mess0+"' />";
row.insertCell(1).innerHTML = "<input type='text' value='"+ mess1+"' />";
row.insertCell(2).innerHTML = "<input type='text' value='"+ mess2+"' />";
row.insertCell(3).innerHTML = "<a href='http://www.cnblogs.com/limiao/archive/2012/07/10/#' onclick='addRow()'>保存</a>";

}

//删除
function deleteRow() {
var currRowIndex = event.srcElement.parentNode.parentNode.rowIndex;
document.all("getTable").deleteRow(currRowIndex);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divBody">
<table id="getTable" cellpadding="0" cellspacing="0">
<tr><td class="td">姓名</td><td>年龄</td><td>地址</td& gt;<td>操作</td></tr>
<tr><td>王重阳</td><td>60</td><td>古 墓</td><td class="td"><a href="http://www.cnblogs.com/limiao/archive/2012/07/10/#" onclick="deleteRow()">删除</a>&nbsp;&nbsp;<a href="http://www.cnblogs.com/limiao/archive/2012/07/10/#" onclick="editRow()">编辑</a></td></tr>
<tr><td>张三丰</td><td>20</td><td>武当 山</td><td class="td"><a href="http://www.cnblogs.com/limiao/archive/2012/07/10/#" onclick="deleteRow()">删除</a>&nbsp;&nbsp;<a href="http://www.cnblogs.com/limiao/archive/2012/07/10/#" onclick="editRow()">编辑</a></td></tr>
<tr><td><input type="text"/></td><td><input type="text" /></td><td class="td">
<input type="text"/></td><td> <a href="http://www.cnblogs.com/limiao/archive/2012/07/10/#" onclick="addRow()">新增</a></td></tr>
<%-- <tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="td"> <a href="http://www.cnblogs.com/limiao/archive/2012/07/10/#" onclick="deleteRow()">删除</a></td></tr>--%>

</table>

<div id="tableget"></div>
</div>
</div>
</form>
</body>
</html>

  评论这张
 
阅读(1632)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017