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代码添加到表格后面。

<!—添加表单 à

<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]

复制代码

这里使用了FormValid作为表单验证，当提交验证成功后将执行JS代码:

[/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]

复制代码

这句的意思就是使用post的方法能过ajax提交到url返回数据格式为json,成功后执行success后的函数。

服务端返回的数据格式为:

{msg:’ok’,result:{ di_id:9 , di_value:’5’, di_caption:’test’}}

然后执行newTr(json.result);进行添加行操作。下面来看newTr这个函数。

[/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]

复制代码

这个函数不是最终的，和最终代码不一样，前面就是把json数据连接成我们要的表格中一行的html代码，然后通过append添加到对像tbody(看代码中的<tbody id="tbody">这里的tbody是ID)，然后将表单置空。本来想完全通过dom操作来实现的，就是没有找到jquery怎么新建DOM节点.

编辑实现思路，我数据表的添加和编辑都是一样处理的，因为区别在于编辑ID值已存在，添加ID值为空，这里主要涉及到怎么修改行数据的问题，如果是一个值一个值的修改未免麻烦了点，我的想法就是进行整行替换。但是没找到jquery中替换节点的方法，我的思路是把新的行添加到要编辑行上面然后把旧的行删除。

在行数据上先通过editItem函数将数据填入表单:

[/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]

复制代码

$('#sm').html('编辑');是为了将id=sm的span内的html修改成” 编辑”.

然后下一步流程回到和添加时一样：提交表单-返回数据，执行newTr,但现在是编辑，我们要对newTr进行改造。

[/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]

复制代码

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]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]

posted on 2010-04-02 16:29 newstar0101 阅读(540) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

newstar0101

导航

公告

Jquery实现简单的表格添加、编辑、删除教程