zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    第二阶段冲刺站立会议报告
    09软件工程读后感之三
    08软件工程读后感之二
    07软件工程读后感之一
    一个整数数组中最大字数组二
    返回一个二维数组最大联通子数组的和
    项目阶段总结
    大道至简阅读笔记之三
    大道至简阅读笔记二
    课堂设计
  • 原文地址:https://www.cnblogs.com/chenxiao/p/2491389.html
Copyright © 2011-2022 走看看