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

用JAVASCRIPT实现表格的编辑

2008-06-28 08:17 756 查看
ASPX的GRIDVIEW提供了丰富的编辑功能，但这些功能需要在服务器上实现再返回到客户端，不单占网络流量，还费时间，如果将生成编辑功能的实现部分在客户端实现，而只需更新时才发送数据到服务器，这样的客户体验更佳了，下面就我的一些实验写出来，与大家共讨论。在这个例子中，只是模拟了表格的编辑功能，并没有更新到服务器，如果使用AJAX方法进行更新，就可以完善了。如果将实现封装成一个类，在使用上就更方便了。

一、有关表格的一些JAVASCRIPT操作和其属性

集合描述IEFOW3C
cells[]返回包含表格中所有单元格的一个数组。511No
rows[]返回包含表格中所有行的一个数组。419Yes
tBodies[]返回包含表格中所有 tbody 的一个数组。4Yes
方法描述IEFOW3C
createCaption()为表格创建一个 caption 元素。419Yes
createTFoot()在表格中创建一个空的 tFoot 元素。419Yes
createTHead()在表格中创建一个空的 tHead 元素。419Yes
deleteCaption()从表格删除 caption 元素以及其内容。419Yes
deleteRow()从表格删除一行。419Yes
deleteTFoot()从表格删除 tFoot 元素及其内容。419Yes
deleteTHead()从表格删除 tHead 元素及其内容。419Yes
insertRow()在表格中插入一个新行。419Yes
二、实现的JAVASCRIPT操作
<script type="text/javascript">

//保存原先的值（取消时用到）

var oldValue, preRowIndex=-1;

//表格ID

var tableID="myTable";

//按钮标题

var buttonTitle={

"modify": "修改",

"save"  : "保存",

"delete": "删除",

"cancel": "取消"

}

//插入行函数

function insertRow(){

var rowCount = document.getElementById(tableID).rows.length;

var r = document.getElementById(tableID).insertRow(rowCount);

var c = r.insertCell(0);

var op = document.createElement("input");

//op.attributes["type"].value = "button";

op.type = "button";

op.attributes["value"].value = buttonTitle["delete"];

op.onclick=deleteRow;

c.appendChild(op);

op = document.createElement("input");

op.attributes["type"].value = "button";

op.attributes["value"].value = buttonTitle["modify"];

op.onclick = modifyRow;

c.appendChild(op);

c = r.insertCell(0);

c.innerText = "Row " + (rowCount);

}

//修改，此按钮作修改与保存用，所以要判断标题

function modifyRow(){

var o = event.srcElement;

var i = o.parentNode.parentNode.rowIndex;

var r = document.getElementById(tableID).rows[i];

if (o.value==buttonTitle["modify"]){

_modify(r);

}

else {

_save(r);

}

}

//删除，此按钮作删除与取消用，所以判断标题

function deleteRow(){

var o = event.srcElement;

var i = o.parentNode.parentNode.rowIndex;

var r = document.getElementById(tableID).rows[i];

if (o.value==buttonTitle["delete"]){

_delete(r);

}

else {

_cancel(r);

}

}

//按钮状态变化

function _btnState(r,state){

if (state=="modify"){

r.cells[1].getElementsByTagName("input")[1].value = buttonTitle["save"];

r.cells[1].getElementsByTagName("input")[0].value = buttonTitle["cancel"];

}

else {

r.cells[1].getElementsByTagName("input")[0].value = buttonTitle["delete"];

r.cells[1].getElementsByTagName("input")[1].value=buttonTitle["modify"];

}

}

//删除行

function _delete(r){

if (confirm("确定要删除此行数据吗？")){

document.getElementById(tableID).deleteRow(r.rowIndex)

}

}

//取消操作

function _cancel(r){

var c = r.cells[0];

c.removeChild(c.childNodes[0]);

c.innerText = oldValue;

_btnState(r,"cancel");

}

//修改，在此行可修改前若有其他行处于修改状态，则将其他行的修改状态取消

function _modify(r){

if (preRowIndex > -1 && preRowIndex != r.rowIndex){

var r1 = document.getElementById(tableID).rows[preRowIndex];

var c1 = r1.cells[0];

c1.removeChild(c1.childNodes[0]);

c1.innerText = oldValue;

_btnState(r1,"cancel");

}

var c = r.cells[0];

var value = c.innerText;

oldValue = value;

preRowIndex = r.rowIndex;

c.removeChild(c.childNodes[0]);

var op = document.createElement("input");

op.attributes["type"].value = "text";

op.attributes["value"].value = value;

c.appendChild(op);

_btnState(r,"modify");

}

//保存

function _save(r){

var c = r.cells[0];

var value = c.childNodes[0].value;

c.removeChild(c.childNodes[0]);

c.innerText = value;

_btnState(r,"save");

}

</script>
三、整个HTML文件的代码
<html>

<head>

<script type="text/javascript">

//保存原先的值（取消时用到）

var oldValue, preRowIndex=-1;

//表格ID

var tableID="myTable";

//按钮标题

var buttonTitle={

"modify": "修改",

"save"  : "保存",

"delete": "删除",

"cancel": "取消"

}

//插入行函数

function insertRow(){

var rowCount = document.getElementById(tableID).rows.length;

var r = document.getElementById(tableID).insertRow(rowCount);

var c = r.insertCell(0);

var op = document.createElement("input");

//op.attributes["type"].value = "button";

op.type = "button";

op.attributes["value"].value = buttonTitle["delete"];

op.onclick=deleteRow;

c.appendChild(op);

op = document.createElement("input");

op.attributes["type"].value = "button";

op.attributes["value"].value = buttonTitle["modify"];

op.onclick = modifyRow;

c.appendChild(op);

c = r.insertCell(0);

c.innerText = "Row " + (rowCount);

}

//修改，此按钮作修改与保存用，所以要判断标题

function modifyRow(){

var o = event.srcElement;

var i = o.parentNode.parentNode.rowIndex;

var r = document.getElementById(tableID).rows[i];

if (o.value==buttonTitle["modify"]){

_modify(r);

}

else {

_save(r);

}

}

//删除，此按钮作删除与取消用，所以判断标题

function deleteRow(){

var o = event.srcElement;

var i = o.parentNode.parentNode.rowIndex;

var r = document.getElementById(tableID).rows[i];

if (o.value==buttonTitle["delete"]){

_delete(r);

}

else {

_cancel(r);

}

}

//按钮状态变化

function _btnState(r,state){

if (state=="modify"){

r.cells[1].getElementsByTagName("input")[1].value = buttonTitle["save"];

r.cells[1].getElementsByTagName("input")[0].value = buttonTitle["cancel"];

}

else {

r.cells[1].getElementsByTagName("input")[0].value = buttonTitle["delete"];

r.cells[1].getElementsByTagName("input")[1].value=buttonTitle["modify"];

}

}

//删除行

function _delete(r){

if (confirm("确定要删除此行数据吗？")){

document.getElementById(tableID).deleteRow(r.rowIndex)

}

}

//取消操作

function _cancel(r){

var c = r.cells[0];

c.removeChild(c.childNodes[0]);

c.innerText = oldValue;

_btnState(r,"cancel");

}

//修改，在此行可修改前若有其他行处于修改状态，则将其他行的修改状态取消

function _modify(r){

if (preRowIndex > -1 && preRowIndex != r.rowIndex){

var r1 = document.getElementById(tableID).rows[preRowIndex];

var c1 = r1.cells[0];

c1.removeChild(c1.childNodes[0]);

c1.innerText = oldValue;

_btnState(r1,"cancel");

}

var c = r.cells[0];

var value = c.innerText;

oldValue = value;

preRowIndex = r.rowIndex;

c.removeChild(c.childNodes[0]);

var op = document.createElement("input");

op.attributes["type"].value = "text";

op.attributes["value"].value = value;

c.appendChild(op);

_btnState(r,"modify");

}

//保存

function _save(r){

var c = r.cells[0];

var value = c.childNodes[0].value;

c.removeChild(c.childNodes[0]);

c.innerText = value;

_btnState(r,"save");

}

</script>

</head>

<body>

<table width="436" border="1" id="myTable">

<thead>

<tr>

<th width="267">内容</th><th width="153">操作</th>

</tr>

</thead>

<tbody>

<tr>

<td>Row 1</td>

<td><input type="button" value="删除" onClick="deleteRow(this)"><input name="button" type="button" onClick="modifyRow(this)" value="修改"></td>

</tr>

<tr>

<td>Row 2</td>

<td><input type="button" value="删除" onClick="deleteRow(this)"><input name="button2" type="button" onClick="modifyRow(this)" value="修改"></td>

</tr>

<tr>

<td>Row 3</td>

<td><input type="button" value="删除" onClick="deleteRow(this)"><input name="button3" type="button" onClick="modifyRow(this)" value="修改"></td>

</tr>

</tbody>

</table>

<div>

<input type="button" value="Insert Row" onClick="insertRow()">

</div>

<div id="rv">

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航