ajax实现无刷新编辑表格，两个demo
使用了ajax,知道了ajax的强大之处。
尝试通过ajax实现CRUD，想让操作网页表格数据像操作excel一样简单强大，网上找资料，无奈参差不齐，都达不到我想要的效果——傻瓜化，强大。参考网上的几个案例，整理了出了两个demo，实现了最基本的，真正的面向傻瓜化。
第一个 ：整行数据修改提交
1 <table> 2 <tr> 3 <th>用户</th> 4 <th>密码</th> 5 </tr> 6 <tr> 7 <td class="y">张三</td> 8 <td>234234asdf</td> 9 <td class="edit"> <input type="button" class="btn" value="提交"/></td> 10 </tr> 11 <tr > 12 <td class="y">李四</td> 13 <td>adfvcrfg</td> 14 <td class="edit"> <input type="button" class="btn" value="提交"/></td> 15 </tr> 16 <tr > 17 <td class="y">王五</td> 18 <td>hrthrert</td> 19 <td class="edit"> <input type="button" class="btn" value="提交"/></td> 20 </tr> 21 <tr > 22 <td class="y" >马六</td> 23 <td>wertdfgwer</td> 24 <td class="edit"> <input type="button" class="btn" value="提交"/></td> 25 </tr> 26 <tr> 27 <td class="y" >田七</td> 28 <td>sdfgert</td> 29 <td class="edit"> <input type="button" class="btn" value="提交"/></td> 30 </tr> 31 </table>
1 $(function () { 2 //找到所有名字的单元格 3 //var name = $("tbody td:even"); 4 var name = $("tbody td").not(".edit");//过滤类是编辑列的 5 //给这些单元格注册鼠标点击事件 6 name.click(function () { 7 //找到当前鼠标单击的td 8 var tdObj = $(this); 9 //保存原来的文本 10 var oldText = $(this).text(); 11 //创建一个文本框 12 var inputObj = $("<input type='text' value='" + oldText + "'/>"); 13 //去掉文本框的边框 14 inputObj.css("border-width", 0); 15 inputObj.click(function () { 16 return false; 17 }); 18 //使文本框的宽度和td的宽度相同 19 inputObj.width(tdObj.width()); 20 inputObj.height(tdObj.height()); 21 //去掉文本框的外边距 22 inputObj.css("margin", 0); 23 inputObj.css("padding", 0); 24 inputObj.css("text-align", "center"); 25 inputObj.css("font-size", "16px"); 26 inputObj.css("background-color", tdObj.css("background-color")); 27 //把文本框放到td中 28 tdObj.html(inputObj); 29 //文本框失去焦点的时候变为文本 30 inputObj.blur(function () { 31 var newText = $(this).val(); 32 tdObj.html(newText);
//老文本
alert(oldText);
//新行列
var s = tdObj.parents("tr").find(".y").text();
alert(s);
33 34 }); 35 //全选 36 inputObj.trigger("focus").trigger("select"); 37 }); 38 //提交 39 $(".btn").click(function () { 40 //依次依据类名获取该行的数据 41 var s = $(this).parents("tr").find(".y").text(); 42 alert(s); 43 //ajax提交区域 44 // 45 }) 46 });
效果图
第二个 ：可以对表格中的每个单元格修改，提交的时候只提交编辑的单元格
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Test2</title> <style type="text/css"> /*表格样式*/ table, tr, td, th { border: 1px solid #A3A3A3; border-collapse: collapse; background-color: #E4E4E4; } td { width: auto; height: 30px; text-align: center; } </style> @* <script src="~/Scripts/jquery-1.7.1.min.js"></script>*@ <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script> <script type="text/javascript"> $(function () { $('table td').click(function () { if (!$(this).is('.input')) { var thisClassWithHover = $(this).attr("class"); var oldValue = $(this).text(); $(this).addClass('input').html('<input type="text" value="' + $(this).text() + '" />').find('input').focus().blur(function () { var thisid = $(this).parent().siblings("th:eq(0)").text(); var thisvalue = $(this).val(); alert(oldValue); //原来的值 alert(thisid); //id alert(thisvalue); //现在的值 alert(thisClassWithHover); //属性名（列名） //ajax提交区域 $.ajax({ type: 'POST', url: 'update.php', data: "thisid=" + thisid + "&thisclass=" + thisClassWithHover + "&thisvalue=" + thisvalue }); $(this).parent().removeClass('input').html($(this).val() || 0); }); } }).hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }); }); </script> </head> <body> <table border="0" cellpadding="0" cellspacing="0"> <thead> <tr> <th>演示</th> <th scope="col" class="content">列1</th> <th scope="col" class="text">第二列</th> <th scope="col" class="position">其他</th> </tr> </thead> <tbody> <tr> <th>头</th> <td class="content">1</td> <td class="text">2</td> <td class="position">3</td> </tr> <tr> <th>头</th> <td class="content">1</td> <td class="text">2</td> <td class="position">3</td> </tr> <tr> <th>头</th> <td class="content">1</td> <td class="text">2</td> <td class="position">3</td> </tr> </tbody> </table> </body> </html>
效果图
