ajax实现无刷新编辑表格，两个demo

weixin_30265171

于 2016-08-12 21:48:00 发布

阅读量81

点赞数

原文链接：http://www.cnblogs.com/Amayer/p/5766684.html

版权

使用了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>