功能：实现列表双击可编辑，异步更新；实现删除的即时移除；
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>列表的双击修改异步更新，动态移除</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript" src="../jquery-1.8.2.js"></script> <script type="text/javascript"> $(function(){ //通过jQuery控制表格隔行换色，并鼠标悬停变色 $('tr:even:gt(0)').addClass('tr_even'); //默认偶数行背景色，无视标题行用:gt(0) $('tr:odd').addClass('tr_odd'); //默认奇数数行背景色 ///////////////////////////////////////////////////////////////////////////////// /** * 对title字段异步更新 */ $('.title').dblclick(function(){ var tdTxtValue = $(this).html(); //$(this)指当前文本框，获取原来td单元格的文本值 var fieldName = $(this).attr('class'); //class=字段名(比如title字段) var dataid = $(this).parent().attr('id'); //在于tr里的数据id var tdInput = '<input type="text" id="'+fieldName+dataid+'" value="'+tdTxtValue+'" />'; //input表单的id以“字段”+“数据id”命名 $(this).html(tdInput); //将td单元格内容换成文本框表单 $('#'+fieldName+dataid).focus().live('blur',function(event){ var editValue = $.trim($(this).val()); //$(this)指当前文本框，失去焦点时获取新编辑的文本框的值 $(this).parent().html(editValue); //$(this)指当前文本框，失去焦点时再将td单元格用纯文本填充 if(editValue != tdTxtValue){ //如果内容被改变，就发送ajax异步更新 $.post('http://others.com/0_module/0/jQuery/listUpdate_Remove/UpdateRemove.php',{id:dataid,field:fieldName,value:editValue},function(data){ if(data.errno==0){ alert('修改成功'); } }); } }); }); }); /** * 删除并移除本行 * @author martinzhang * @param thisObject 当前a标签对象 * @return none */ function removeTR(thisObject){ var thisObj = $(thisObject); //当前a标签对象 var dataId = thisObj.parent().parent().attr('id'); //数据主键id if(!confirm('删除后不可恢复，确实删除?')){ return false; } $.post('http://others.com/0_module/0/jQuery/listUpdate_Remove/UpdateRemove.php/Id/'+dataId,function(data){ if(data.errno==0){ //使a标签的父级(td)的父级(tr)淡出 thisObj.parent().parent().fadeOut('normal',function(){ //使a标签的父级(td)的父级(tr)移除 thisObj.parent().parent().remove(); }); } },'json'); } </script> <style type="text/css"> th{background-color:#CCCCCC;} /* 标题背景色 */ .tr_even{background-color:#fffff5} /* 偶数行背景色 */ .tr_odd{background-color:#fffff5} /* 奇数行背景色 */ .tr_even:hover,.tr_odd:hover{background-color:#CACACA;} /* 通过CSS实现鼠标悬停高亮色 */ </style> </head> <body> <table border="1" width="100%" cellspacing="0" cellpadding="0"> <tr> <th>数据列</th> <th>操作</th> </tr> <tr id="1"> <td class="title">11月69城新房价同比</td> <td><a onclick="removeTR(this)" href="javascript:;">删除</a></td> </tr> <tr id="2"> <td class="title">山东等养殖场</td> <td><a onclick="removeTR(this)" href="javascript:;">删除</a></td> </tr> <tr id="3"> <td class="title">秦始皇陵地下</td> <td><a onclick="removeTR(this)" href="javascript:;">删除</a></td> </tr> <tr id="4"> <td class="title">动保组织曝光活体</td> <td><a onclick="removeTR(this)" href="javascript:;">删除</a></td> </tr> <tr id="5"> <td class="title">广汽本田凌派长测总结</td> <td><a onclick="removeTR(this)" href="javascript:;">删除</a></td> </tr> </table> </body> </html>
后端代码(PHP):
<?php //...这里执行一系列数据库操作，更新数据，删除数据等，这里假设成功了...... echo json_encode(array('errno'=>0,'errmsg'=>$_POST));