Jquery实现简单的表格添加、编辑、删除教程
完整代码：
<!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代码添加到表格后面。
<!—添加表单 à
< 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 ]
这里使用了FormValid作为表单验证，当提交验证成功后将执行JS代码:
[ 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 ]
这句的意思就是使用post的方法能过ajax提交到url返回数据格式为json,成功后执行success后的函数。
服务端返回的数据格式为:
{msg:’ok’,result:{ di_id:9 , di_value:’5’, di_caption:’test’}}
然后执行newTr(json.result);进行添加行操作。下面来看newTr这个函数。
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 ]
这个函数不是最终的，和最终代码不一样，前面就是把json数据连接成我们要的表格中一行的html代码，然后通过append添加到对像tbody(看代码中的<tbody id="tbody">这里的tbody是ID)，然后将表单置空。本来想完全通过dom操作来实现的，就是没有找到jquery怎么新建DOM节点.
编辑实现思路，我数据表的添加和编辑都是一样处理的，因为区别在于编辑ID值已存在，添加ID值为空，这里主要涉及到怎么修改行数据的问题，如果是一个值一个值的修改未免麻烦了点，我的想法就是进行整行替换。但是没找到jquery中替换节点的方法，我的思路是把新的行添加到要编辑行上面然后把旧的行删除。
在行数据上先通过editItem函数将数据填入表单:
[ 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 ]
$('#sm').html('编辑');是为了将id=sm的span内的html修改成” 编辑”.
然后下一步流程回到和添加时一样：提交表单-返回数据，执行newTr,但现在是编辑，我们要对newTr进行改造。
[ 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 ]
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 = 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 ]