使用JS操作table 增删改查

最新推荐文章于 2021-08-21 16:43:24 发布

转载最新推荐文章于 2021-08-21 16:43:24 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/limiao/archive/2012/07/10/2585158.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍如何使用JStable实现表格的增删改查功能，包括JavaScript代码示例及HTML结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能说明:用JS table实现增删改查

创建时间:2012-7-10

创建人:紫樱桑

备注:;欢迎转载,以及提出宝贵的意见,本人才疏学浅,愿共同探讨

姓名	年龄	地址	操作
王重阳	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='#' onclick='deleteRow()'>删除</a>&nbsp;&nbsp;<a href='#' 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='#' 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><td>操作</td></tr>
<tr><td>王重阳</td><td>60</td><td>古墓</td><td class="td"><a href="#" onclick="deleteRow()">删除</a>&nbsp;&nbsp;<a href="#" onclick="editRow()">编辑</a></td></tr>
<tr><td>张三丰</td><td>20</td><td>武当山</td><td class="td"><a href="#" onclick="deleteRow()">删除</a>&nbsp;&nbsp;<a href="#" 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="#" 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="#" onclick="deleteRow()">删除</a></td></tr>--%>

</table>

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