jquery table

View Code

 1     <table border=1 id="table6">   
 2     <tbody id="tbody6">   
 3         <tr class="template  repeat">   
 4         <td class="content">模板1</td>
 5             <td  class="content">这里是模板 by yanleigs Email:landgis@126.com</td>   
 6             <td><button class="del">模板,不要删除</button></td>   
 7         </tr>   
 8         <tr class="repeat">   
 9         <td class="content">模板1</td>
10             <td class="content">这行原来就有</td>   
11             <td><button type_id="1" class="del">删除</button>|<button type_id="这是自定义属性" id="tedit">编辑</button></td>   
12         </tr>   
13        
14        
15         <tr class="repeat" id="lastid">   
16         <td class="content">模板1</td>
17             <td  id="urlid" class="content">这行原来就有</td>   
18             <td><button type_id="2" class="del">删除</button>|<button type_id="这是自定义属性" id="tedit">编辑</button></td>   
19         </tr>   
20     </tbody>   
21     <tfoot>   
22         <tr>   
23             <td> </td>   
24              <td> </td>   
25             <td><button id="add6">添加</button></td>   
26         </tr>   
27     </tfoot>   
28 </table>

View Code

 1   <table id="table1" width='100%' border='1' cellpadding='1' cellspacing='1' align="center" style="margin-top: 8px;height:35px;">
 2                <tr style="height:25px;">
 3                 <th align="left">
 4                     名字
 5                 </th>
 6                 <th align="left">
 7                     年龄
 8                 </th>                
 9                 <th align="left">
10                     路径
11                 </th>
12                 <th align="center">
13                  操作
14                 </th>
15                 
16             </tr>
17         @foreach (var item in Model)
18         { 
19             <tr>
20              <td>@item.Name</td>
21              <td>@item.Age</td>
22              <td>@item.HrefURL</td>
23              <td>
24               <a href="javascript:void(0)" onclick="edit(@item.id)"  title="新开页面进行编辑">
25                   编辑
26                     </a>
27                     <a href="#" id="Delete"  title="删除">
28                     删除
29                     </a>
30 
31              </td>
32             </tr>
33         }
34     </table>

View Code

  <script type="text/javascript">
        $(document).ready(function () {
            $("#tbody6 .del").click(function (e) {

                var guid = $(this).attr("type_id");
                var tr = $(this).parents("tr");
                var index = $("#table6 tr").index(tr); //查找tr 在table 的索引
                $.messager.confirm("消息", "是否确定删除第【" + index + "】行的数据？", function (e) {
                    if (e) {
                        if (index == 0) {
                            alert("模板不能删除。"); return false;
                        }
                        tr.remove();
                    }
                });

                alert(guid);



                //   $(this).parents(".repeat").remove();
            });

            //table1 begin
            $("#table1 #Delete").click(function () {
                var tr = $(this).parents("tr");
                $.messager.confirm("提示信息", "是否确定删除第【" + tr.index() + "】行的数据？", function (r) {
                    if (r) {
                        tr.remove();
                    }
                    
                });

            });
            //end



            $("#add6").click(function () {
                $("#tbody6>tr:last")
                                .clone(true) //拷贝。包括事件
                                .removeClass("template") //删除样式
                                .addClass("repeat") //添加样式
                                .find(".content") //查找
                                .text("请增行11") //文本赋值
                                .end() //查找 .content 然后恢恢复到选择所有段落的状态
                                .find(".del").text("删除").attr("type_id", "8")
                                .end()
                                .find("#urlid").text("111").attr("type_id", 9).end()

                //  .add("<button type_id='这是自定义属性' id='tedit'>编辑</button>")
                                .appendTo($("#tbody6")) //最后添加到 tbody6上



            });



            $("#tbody6 #tedit").click(function () {
                var tr = $(this).parents("tr");
                var index = $("#table6 tr").index(tr);

                alert(index);
                var v = $(this).attr("type_id"); //自定义数量可以设置为数据库的编号
                alert(v);
            });

        });

        //保存 。修改刷新一次就可以了
        function deletes(id)
        {
            $.messager.confirm("删除提示", "是否确定删除？", function (r) {
                if (r) {
                    $.ajax({
                        type: "POST",
                        url: "/Home/Delete",
                        data: { id: id },
                        success: function (msg) {
                            // $.messager.alert("消息", msg.Message, "info");


                            //                            if (msg.IsSuccess) {
                            //                                history.go(0);
                            //                            }
                        }
                    });

                }
            });


         
        }


        function edit(id) {
            $.ajax({
                type: "POST",
                url: "/Home/EditUser",
                data: { id: id },
                success: function (msg) {
                    $("#txtName").val(msg.Name);
                    $("#txtAge").val(msg.Age);
                    $("#txtURL").val(msg.URL);
                    $("#txtid").val(id);
                }
            });

            $("#divUser").show().dialog({
                modal: true,
                autoOpen: false,
                title: "编辑",
                 500,
                height: 300,
                autoOpen: false,
                buttons: [{ //begin 01
                    text: "保存",
                    iconCls: "icon-ok",
                    handler: function () {
                        $.ajax({
                            type: "POST",
                            url: "/Home/SaveUser",
                            data: id,
                            success: function (msg) {
                                $.messager.alert("消息", msg.Message, "info");
                                if (msg.IsSuccess) {
                                    $("#divUser").show().dialog("close");
                                }
                            }
                        });

                    }
                }, //分割 
                {
                text: "取消",
                iconCls: "icon-cancel",
                handler: function () {
                    $.messager.confirm("确认消息", "是否确定关闭？", function (r) {
                        if (r)
                            $("#divUser").show().dialog("close");
                    });
                }

            }]//end 01
        });
        }

    </script>