Jquery实现简单的表格添加、编辑、删除教程
2007-11-20 19:39
1016 查看
完整代码：
<!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" c />
<title> Jquery实现简单的表格添加编辑删除教程</title>
<scrīpt language="Javascrīpt" type="text/javascrīpt" src="jquery.js"></scrīpt>
<scrīpt language="Javascrīpt" type="text/javascrīpt" src="FormValid.js"></scrīpt>
<scrīpt language="Javascrīpt" type="text/javascrīpt" src="Forms.js"></scrīpt>
</head>
<body>
<div class="wrap">
<scrīpt type="text/javascrīpt">
FormValid.succeed = function () {
$.ajax({
type: "POST",
url: "?action=save&request=ajax",
data: $.getForms('addItem'),
dataType:'json',
success: function (json) {
if (json.msg=='ok') {
newTr(json.result);
} else {
alert(json.msg);
}
}
});
return false;
}
function newTr(json) {
var html = '<tr class="alternate" id="tr'+json.di_id+'tmp">';
html += '<td><input type="checkbox" name="dds[]" value="'+json.di_id+'"></td>';
html += '<td>'+json.di_value+'</td>';
html += '<td>'+json.di_caption+'</td>';
html += '<td><a href="javascrīpt:editItem('+json.di_id+',/''+json.di_value+'/',/''+json.di_caption +'/')">编辑</a></td>';
html += '</tr>';
if (!$F('di_id')) {
$("#tbody").append(html);
} else {
$('#tr'+json.di_id).before(html);
$('#tr'+json.di_id).remove();
}
$('#tr'+json.di_id+'tmp').attr('id','tr'+json.di_id);
document.addItem.di_id.value='';
document.addItem.di_value.value='';
document.addItem.di_caption.value='';
$('#sm').html('添加');
}
function editItem(id,value,caption) {
document.addItem.di_id.value=id;
document.addItem.di_value.value=value;
document.addItem.di_caption.value=caption;
$('#sm').html('编辑');
}
function delItem(form) {
if(confirm('真的要删除吗?')) {
var a = new Array();
for (var i=0;i<form.elements.length;i++) {
var e = form.elements;
if (e.checked==true && e.type=='checkbox' && e.name) {
a.push(e.value);
}
}
if (a.length==0) {
alert('没有选择！');
return false;
}
$.get('?action=delete&ids='+a.join(','),null,function (msg) {
alert(msg);
for (i in a) {
$('#tr'+a).remove();
}
});
}
}
</scrīpt>
<!—添加表单 à
<form id="addItem" name="addItem" method="post" action="dd.php?action=edit" >
<input type="hidden" name="di_id" value="" />
<span id="sm">添加</span>项
值：<input name="di_value" value="" valid="required|isNumber|isNo" noValue="0" errmsg="值不能为空!|值必须为数字|值不允许为0" />
名称:<input name="di_caption" value="" valid="required" errmsg="名称不能为空!" />
<input type="submit" value="保存" class="button" />
</form>
<!—列表表单 à
<form name="form1" method="post" >
<table class="widefat">
<thead>
<tr>
<th scope="col" width="20"><input type="checkbox" ></th>
<th scope="col">值</th>
<th scope="col">名称</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr class='alternate' id="tr69">
<td><input type="checkbox" name="dds[]" value="69"></td>
<td>1</td>
<td> 轿车</td>
<td><a href="javascrīpt:editItem(69,'1','轿车')">编辑</a></td>
</tr>
<tr class='alternate' id="tr70">
<td><input type="checkbox" name="dds[]" value="70"></td>
<td>2</td>
<td> 客车</td>
<td><a href="javascrīpt:editItem(70,'2','客车')">编辑</a></td>
</tr>
<tr class='alternate' id="tr71">
<td><input type="checkbox" name="dds[]" value="71"></td>
<td>3</td>
<td> 货车</td>
<td><a href="javascrīpt:editItem(71,'3','货车')">编辑</a></td>
</tr>
</tbody>
</table>
<div align="right" style="padding-top: 15px;"><input class="button" type="button" value="删除选中" ></div>
</form>
</div>
</body>
</html>
添加实现思路，首先一个提交表单通过AJAX提交数据，成功后服务端返回json数据，然后将数据连接成一行html代码添加到表格后面。
<!—添加表单 à
这里使用了FormValid作为表单验证，当提交验证成功后将执行JS代码:
这句的意思就是使用post的方法能过ajax提交到url返回数据格式为json,成功后执行success后的函数。
服务端返回的数据格式为:
{msg:’ok’,result:{ di_id:9 , di_value:’5’, di_caption:’test’}}
然后执行newTr(json.result);进行添加行操作。下面来看newTr这个函数。
这个函数不是最终的，和最终代码不一样，前面就是把json数据连接成我们要的表格中一行的html代码，然后通过append添加到对像tbody(看代码中的<tbody id="tbody">这里的tbody是ID)，然后将表单置空。本来想完全通过dom操作来实现的，就是没有找到jquery怎么新建DOM节点.
编辑实现思路，我数据表的添加和编辑都是一样处理的，因为区别在于编辑ID值已存在，添加ID值为空，这里主要涉及到怎么修改行数据的问题，如果是一个值一个值的修改未免麻烦了点，我的想法就是进行整行替换。但是没找到jquery中替换节点的方法，我的思路是把新的行添加到要编辑行上面然后把旧的行删除。
在行数据上先通过editItem函数将数据填入表单:
$('#sm').html('编辑');是为了将id=sm的span内的html修改成” 编辑”.
然后下一步流程回到和添加时一样：提交表单-返回数据，执行newTr,但现在是编辑，我们要对newTr进行改造。
Html内容基本不变，按上面的添加编辑区别在于编辑ID值已存在，添加ID值为空，作为判断条件。
if (!$F('di_id')), $F('di_id')等同于document.addItem.di_id.value,这个函数在Froms中
如果表单$F('di_id')值为空执行原来的$("#tbody").append(html);，有值时执行：
$('#tr'+json.di_id).before(html);
$('#tr'+json.di_id).remove();
就是上面提到的把html插入到要编辑行的前面然后把原来的行删除(remove)。但这样有个问题就是ID重复了，解决办法是先把新ID设置为临时的json.di_id+tmp（第一行HTML有小改动）
然后删除原来的行后再把ID改为新的：
$('#tr'+json.di_id+'tmp').attr('id','tr'+json.di_id);
Attr的作用是修改属性。 这样修改完毕。
删除实现思路，删除主要是先判断哪些行被选中了然后用remove删除就行了。
<!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" c />
<title> Jquery实现简单的表格添加编辑删除教程</title>
<scrīpt language="Javascrīpt" type="text/javascrīpt" src="jquery.js"></scrīpt>
<scrīpt language="Javascrīpt" type="text/javascrīpt" src="FormValid.js"></scrīpt>
<scrīpt language="Javascrīpt" type="text/javascrīpt" src="Forms.js"></scrīpt>
</head>
<body>
<div class="wrap">
<scrīpt type="text/javascrīpt">
FormValid.succeed = function () {
$.ajax({
type: "POST",
url: "?action=save&request=ajax",
data: $.getForms('addItem'),
dataType:'json',
success: function (json) {
if (json.msg=='ok') {
newTr(json.result);
} else {
alert(json.msg);
}
}
});
return false;
}
function newTr(json) {
var html = '<tr class="alternate" id="tr'+json.di_id+'tmp">';
html += '<td><input type="checkbox" name="dds[]" value="'+json.di_id+'"></td>';
html += '<td>'+json.di_value+'</td>';
html += '<td>'+json.di_caption+'</td>';
html += '<td><a href="javascrīpt:editItem('+json.di_id+',/''+json.di_value+'/',/''+json.di_caption +'/')">编辑</a></td>';
html += '</tr>';
if (!$F('di_id')) {
$("#tbody").append(html);
} else {
$('#tr'+json.di_id).before(html);
$('#tr'+json.di_id).remove();
}
$('#tr'+json.di_id+'tmp').attr('id','tr'+json.di_id);
document.addItem.di_id.value='';
document.addItem.di_value.value='';
document.addItem.di_caption.value='';
$('#sm').html('添加');
}
function editItem(id,value,caption) {
document.addItem.di_id.value=id;
document.addItem.di_value.value=value;
document.addItem.di_caption.value=caption;
$('#sm').html('编辑');
}
function delItem(form) {
if(confirm('真的要删除吗?')) {
var a = new Array();
for (var i=0;i<form.elements.length;i++) {
var e = form.elements;
if (e.checked==true && e.type=='checkbox' && e.name) {
a.push(e.value);
}
}
if (a.length==0) {
alert('没有选择！');
return false;
}
$.get('?action=delete&ids='+a.join(','),null,function (msg) {
alert(msg);
for (i in a) {
$('#tr'+a).remove();
}
});
}
}
</scrīpt>
<!—添加表单 à
<form id="addItem" name="addItem" method="post" action="dd.php?action=edit" >
<input type="hidden" name="di_id" value="" />
<span id="sm">添加</span>项
值：<input name="di_value" value="" valid="required|isNumber|isNo" noValue="0" errmsg="值不能为空!|值必须为数字|值不允许为0" />
名称:<input name="di_caption" value="" valid="required" errmsg="名称不能为空!" />
<input type="submit" value="保存" class="button" />
</form>
<!—列表表单 à
<form name="form1" method="post" >
<table class="widefat">
<thead>
<tr>
<th scope="col" width="20"><input type="checkbox" ></th>
<th scope="col">值</th>
<th scope="col">名称</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr class='alternate' id="tr69">
<td><input type="checkbox" name="dds[]" value="69"></td>
<td>1</td>
<td> 轿车</td>
<td><a href="javascrīpt:editItem(69,'1','轿车')">编辑</a></td>
</tr>
<tr class='alternate' id="tr70">
<td><input type="checkbox" name="dds[]" value="70"></td>
<td>2</td>
<td> 客车</td>
<td><a href="javascrīpt:editItem(70,'2','客车')">编辑</a></td>
</tr>
<tr class='alternate' id="tr71">
<td><input type="checkbox" name="dds[]" value="71"></td>
<td>3</td>
<td> 货车</td>
<td><a href="javascrīpt:editItem(71,'3','货车')">编辑</a></td>
</tr>
</tbody>
</table>
<div align="right" style="padding-top: 15px;"><input class="button" type="button" value="删除选中" ></div>
</form>
</div>
</body>
</html>
添加实现思路，首先一个提交表单通过AJAX提交数据，成功后服务端返回json数据，然后将数据连接成一行html代码添加到表格后面。
<!—添加表单 à
这里使用了FormValid作为表单验证，当提交验证成功后将执行JS代码:
这句的意思就是使用post的方法能过ajax提交到url返回数据格式为json,成功后执行success后的函数。
服务端返回的数据格式为:
{msg:’ok’,result:{ di_id:9 , di_value:’5’, di_caption:’test’}}
然后执行newTr(json.result);进行添加行操作。下面来看newTr这个函数。
这个函数不是最终的，和最终代码不一样，前面就是把json数据连接成我们要的表格中一行的html代码，然后通过append添加到对像tbody(看代码中的<tbody id="tbody">这里的tbody是ID)，然后将表单置空。本来想完全通过dom操作来实现的，就是没有找到jquery怎么新建DOM节点.
编辑实现思路，我数据表的添加和编辑都是一样处理的，因为区别在于编辑ID值已存在，添加ID值为空，这里主要涉及到怎么修改行数据的问题，如果是一个值一个值的修改未免麻烦了点，我的想法就是进行整行替换。但是没找到jquery中替换节点的方法，我的思路是把新的行添加到要编辑行上面然后把旧的行删除。
在行数据上先通过editItem函数将数据填入表单:
$('#sm').html('编辑');是为了将id=sm的span内的html修改成” 编辑”.
然后下一步流程回到和添加时一样：提交表单-返回数据，执行newTr,但现在是编辑，我们要对newTr进行改造。
Html内容基本不变，按上面的添加编辑区别在于编辑ID值已存在，添加ID值为空，作为判断条件。
if (!$F('di_id')), $F('di_id')等同于document.addItem.di_id.value,这个函数在Froms中
如果表单$F('di_id')值为空执行原来的$("#tbody").append(html);，有值时执行：
$('#tr'+json.di_id).before(html);
$('#tr'+json.di_id).remove();
就是上面提到的把html插入到要编辑行的前面然后把原来的行删除(remove)。但这样有个问题就是ID重复了，解决办法是先把新ID设置为临时的json.di_id+tmp（第一行HTML有小改动）
然后删除原来的行后再把ID改为新的：
$('#tr'+json.di_id+'tmp').attr('id','tr'+json.di_id);
Attr的作用是修改属性。 这样修改完毕。
删除实现思路，删除主要是先判断哪些行被选中了然后用remove删除就行了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery实现简单的表格添加、编辑、删除教程
- jQuery实现的简单动态添加、删除表格功能示例
- jquery 实现表格内的tr与td,动态添加与删除. 以及序号增加与减少，大多用在Form里
- jQuery实现表格行和列的动态添加与删除方法【测试可用】
- Html+js实现表格可编辑，并能动态添加删除行
- jQuery实现用户添加删除,符合条件追加到表格
- 分享一个表格插入和删除编辑功能用jQuery实现
- Jquery实现select multiple左右添加和删除功能的简单实例
- 基于jquery的实现简单的表格中增加或删除下一行
- jQuery简单实现购物车添加删除操作
- jquery 删除节点 添加节点 找兄弟节点的简单实现
- 基于jquery的实现简单的表格中增加或删除下一行
- 超级简单的jquery操作表格(添加/删除行、添加/删除列)
- Android表格布局TableLayout简单实现(Java动态添加,设置边框,删除数据(单行,多行))
- Jquery实现表格行的添加、删除
- JQuery实现可编辑的表格...超简单...一看就懂
- jquery 实现简单的表格中增加或删除下一行
- jQuery（4）--实现用户的添加,删除，编辑功能
- 基于Bootstrap使用jQuery实现简单可编辑表格
- [Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）