Jquery实现简单的表格添加、编辑、删除教程
Jquery实现简单的表格添加、编辑、删除教程
[size=3]完整代码：<!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>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="FormValid.js"></script>
<script language="JavaScript" type="text/javascript" src="Forms.js"></script>
</head>
<body>
<div class="wrap">
<script type="text/javascript">
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="javascript: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();
}
});
}
}
</script>
<!—添加表单 à
<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="javascript: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="javascript: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="javascript: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代码添加到表格后面。
<!—添加表单 à
[php]
<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>
[/size][size=3][/php][/size]
[size=3]这里使用了FormValid作为表单验证，当提交验证成功后将执行JS代码:
[/size][size=3][php][/size]
[size=3]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;
}
[/size][size=3][/php][/size]
[size=3]这句的意思就是使用post的方法能过ajax提交到url返回数据格式为json,成功后执行success后的函数。
服务端返回的数据格式为:
{msg:’ok’,result:{ di_id:9 , di_value:’5’, di_caption:’test’}}
然后执行newTr(json.result);进行添加行操作。下面来看newTr这个函数。
[/size][size=3][php][/size][size=3]function newTr(json) {
var html = '<tr class="alternate" id="tr'+json.di_id+'">';
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="javascript:editItem('+json.di_id+',/''+json.di_value+'/',/''+json.di_caption+'/')">编辑</a></td>';
html += '</tr>';
$("#tbody").append(html);
document.addItem.di_id.value='';
document.addItem.di_value.value='';
document.addItem.di_caption.value='';
}
[/size][size=3][/php][/size][size=3]
这个函数不是最终的，和最终代码不一样，前面就是把json数据连接成我们要的表格中一行的html代码，然后通过append添加到对像tbody(看代码中的<tbody id="tbody">这里的tbody是ID)，然后将表单置空。本来想完全通过dom操作来实现的，就是没有找到jquery怎么新建DOM节点.
编辑实现思路，我数据表的添加和编辑都是一样处理的，因为区别在于编辑ID值已存在，添加ID值为空，这里主要涉及到怎么修改行数据的问题，如果是一个值一个值的修改未免麻烦了点，我的想法就是进行整行替换。但是没找到jquery中替换节点的方法，我的思路是把新的行添加到要编辑行上面然后把旧的行删除。
在行数据上先通过editItem函数将数据填入表单:
[/size][size=3][php][/size]
[size=3]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('编辑');
}
[/size][size=3][/php][/size]
[size=3]$('#sm').html('编辑');是为了将id=sm的span内的html修改成” 编辑”.
然后下一步流程回到和添加时一样：提交表单-返回数据，执行newTr,但现在是编辑，我们要对newTr进行改造。
[/size][size=3][php][/size]
[size=3]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="javascript: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('添加');
}
[/size][size=3][/php][/size]
[size=3]
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删除就行了。
[/size][size=3][php][/size]
[size=3]function delItem(form) {
if(confirm('真的要删除吗?')) {
var a = new Array();
for (var i=0;i<form.elements.length;i++) {//遍逆所有form元素
var e = form.elements;
if (e.checked==true && e.type=='checkbox' && e.name) {
//当类型为checkbox并选中的情况下把值添加到a数组。
a.push(e.value);
}
}
if (a.length==0) {
alert('没有选择！');
return false;
}
$.get('?action=delete&ids='+a.join(','),null,function (msg) {//join等同PHP的implode
alert(msg);
for (i in a) {//这种写法等同PHP的foreach,I = key
$('#tr'+a).remove();
}
});
}
}[/size][size=3][/php][/size]