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>