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: "编辑",

                width: 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>

你可能感兴趣的:(jquery)