Ajax结合Js操作灵活操作表格

Table页面：

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title></title>
  6     <script src="../Scripts/jquery-1.7.1.js"></script>
  7     <script src="../Scripts/jquery-1.7.1.min.js"></script>
  8     <script src="../Scripts/jquery.reveal.js"></script>
  9     <script type="text/ecmascript">
 10         // 新增
 11         function trdadd() {
 12             flag = false;
 13             document.getElementById("myModal").style.display = "block"; //控制显示
 14             chongzhi();
 15             document.getElementById("aid").disabled = false; //重新启用
 16         }
 17         //保存
 18         function baocun() {
 19             if (flag == false) {
 20                 add(flag);
 21                 document.getElementById("myModal").style.display = "none";
 22             } else {
 23 
 24                 add(flag);
 25                 document.getElementById("myModal").style.display = "none";
 26             }
 27         }
 28         //重置
 29         function chongzhi() {
 30             document.getElementById("form1").reset();
 31         }
 32         //删除      
 33         function deleteRow(input) {
 34             var s = input.parentNode.parentNode.rowIndex;
 35             document.getElementById("tableid").deleteRow(s);
 36             var num = document.getElementById("tableid").rows.length;
 37             for (var i = 1; i < num; i += 1) {
 38                 table.rows[i].cells[0].innerHTML = i; //把每行的每一列设为i
 39             }
 40             //alert("删除成功！！");
 41         }
 42         $(function () {
 43             initTable();//初始化表格
 44         });
 45         function initTable() {
 46             $.getJSON("LoadAllMailInfo.ashx", "", function (data) {
 47                 $("#tbBody").html("");
 48                 for (var key in data) {
 49                     var strTr = "<tr style='height: 45px;'>";
 50                     strTr += "<td style='height: 25px;'>" + data[key].EID + "</td>";
 51                     strTr += "<td style='height: 25px;'>" + data[key].Recipients + "</td>";
 52                     strTr += "<td style='height: 25px;'>" + data[key].MailRecAddress + "</td>";
 53                     strTr += "<td style='height: 25px;'><input type='button' value='刪除' onclick='deleteRow(this)'></td>";
 54                     strTr += "</tr>";
 55                     $("#tbBody").append(strTr);
 56                 }
 57             });
 58         }
 59     </script>
 60         <style type="text/css">
 61         .title_bg {
 62             background-image: url(../images/titleBg.jpg);
 63             font-size: 10.5pt;
 64             font-family: Arial, "宋体";
 65             color: #000000;
 66             border: #A4A3A3 solid 1px;
 67             text-align: center;
 68         }
 69 
 70         .form_bg_nosize {
 71             color: #000000;
 72             border-width: 1pt;
 73             border-style: solid;
 74             border-color: #A4A3A3;
 75         }
 76 
 77         .form_bg {
 78             font-size: 10.5pt;
 79             color: #000000;
 80             border-width: 1pt;
 81             border-style: solid;
 82             border-color: #A4A3A3;
 83         }
 84 
 85         .notvisible {
 86             display: none;
 87         }
 88 
 89         .auto-style1 {
 90             border: 1pt solid #A4A3A3;
 91             font-size: 10.5pt;
 92             color: #000000;
 93             width: 1074px;
 94         }
 95 
 96         .auto-style2 {
 97             background-image: url('../images/titleBg.jpg');
 98             font-size: 10.5pt;
 99             font-family: Arial, "宋体";
100             color: #000000;
101             border: #A4A3A3 solid 1px;
102             text-align: center;
103             width: 188px;
104         }
105 
106         .reveal-modal-bg {
107             position: fixed;
108             height: 100%;
109             width: 100%;
110             z-index: 100;
111             display: none;
112             top: 0;
113             left: 0;
114         }
115 
116         .reveal-modal {
117             visibility: hidden;
118             top: 60px;
119             left: 50%;
120             margin-left: -150px;
121             width: 150px;
122             height: 70px;
123             position: absolute;
124             z-index: 101;
125             padding: 30px 40px 34px;
126             -moz-border-radius: 5px;
127             -webkit-border-radius: 5px;
128             border-radius: 5px;
129             -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
130             -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
131             -box-shadow: 0 0 10px rgba(0,0,0,.4);
132             background-color: #FFF;
133         }
134 
135             .reveal-modal.small {
136                 width: 200px;
137                 margin-left: -140px;
138             }
139 
140             .reveal-modal.medium {
141                 width: 400px;
142                 margin-left: -240px;
143             }
144 
145             .reveal-modal.large {
146                 width: 600px;
147                 margin-left: -340px;
148             }
149 
150             .reveal-modal.xlarge {
151                 width: 800px;
152                 margin-left: -440px;
153             }
154 
155             .reveal-modal .close-reveal-modal {
156                 font-size: 22px;
157                 line-height: 0.5;
158                 position: absolute;
159                 top: 8px;
160                 right: 11px;
161                 color: #333;
162                 text-shadow: 0 -1px 1px rbga(0,0,0,.6);
163                 font-weight: bold;
164                 cursor: pointer;
165             }
166 
167         body {
168             background-color: #F2F2F2;
169             font-size: 12px;
170         }
171           .td {
172                 height:25px;
173             }
174     </style>
175 
176 </head>
177 <body>
178     <form id="form1" runat="server">
179         <center>
180     <table id="tableid" border="#A4A3A3 solid 0.5px;" cellpadding="0" cellspacing="0" width="540px;"  style="text-align: center;">
181         <thead>
182             <tr style="height:40px">
183                 <th style=" 45px; height: 25px; font-weight: normal">編號</th>
184                 <th style=" 200px; height: 25px; font-weight: normal">收件人</th>
185                 <th style=" 200px; height: 25px; font-weight: normal">eMail</th>
186                 <th><a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade" onclick="trdadd()"><input type="button"  value="新增郵件" onclick="trdadd()"></a></th>
187             </tr>
188         </thead>
189         <tbody id="tbBody">
190         </tbody>
191          <div id="myModal" class="reveal-modal" style="200px;height:100px;display:none"">
192             <p>收件者 : <input id="aid" type="text" style="100px"></p>
193             <p>eMail : <input id="cid" type="text" style="100px"></p>
194             <h1><input type="button" value="保存" onclick="baocun()">&nbsp;&nbsp;<input type="reset" value="重置" onclick="    chongzhi()"> </h1>
195             <a class="close-reveal-modal">&#215;</a>
196 </div>
197     </table>
198      <div id="fid" style="display : none">
199       <form id="formid">
200      <table id="aaid">
201      <tr>
202      </tr>
203      </table>
204     </form>
205          </center>
206        </div>
207             
208         </form>
209      <input type="hidden" id="HidTd" />   
210 </body>
211 </html>
212 <script type="text/javascript">
213     function GetTd() {
214         document.getElementById("HidTd").value = "";
215         var all = "";
216         var td1 = $("#tableid tr td:eq(4)").html();
217         var mytds = document.getElementsByTagName("td");
218         for (var i = 0; i < document.getElementsByTagName("td").length; i++) {
219             // all += mytds[i].innerText();
220             document.getElementById("HidTd").value += document.getElementsByTagName("td")[i].innerText + "|";
221         }
222         alert(document.getElementById("HidTd").value);
223         //alert(td1);
224     }
225 
226     //全局变量
227     var table = document.getElementById("tableid");
228     var flag = false;
229     var getselectrow;
230     function getNum() {
231         var haoRow = table.rows[0];
232         return haoRow.cells.length;
233     }
234 
235     //添加方法
236 
237     function add(flag) {
238         if (!flag) {
239             // var num=getNum();
240             var newTD = document.createElement('td');
241             newTD.setAttribute('className', 'form_new');
242             newTD.setAttribute('align', 'center');
243             newTD.setAttribute('height', '45px');
244             //newTD.setAttribute('border', '0px');
245             var row = table.insertRow(-1); //为-1时往下加（升序），为0时往上加（id降序）
246             var add1 = row.insertCell(0);
247             var add2 = row.insertCell(1);
248             var add3 = row.insertCell(2);
249             var add4 = row.insertCell(3);
250             //var add5 = row.insertCell(4);
251             //var add6 = row.insertCell(5);
252             row.appendChild(newTD);
253             add1.innerHTML = document.getElementById("tableid").rows.length -1;//不加-1时id从二开始；原因：标题占一个
254             add2.innerHTML = document.getElementById("aid").value;
255             //add3.innerHTML = document.getElementById("bid").value;
256             add3.innerHTML = document.getElementById("cid").value;
257             var tall = document.getElementById("eid");
258             //var index = tall.selectedIndex;// 当前坐标
259             //var option = tall.options[index];
260             //add5.innerHTML = option.text;
261             //add6.innerHTML = "<input type='button' value='修改' onclick='updateRow(this)'> <input type='button' value='删除' onclick='deleteRow(this)'>";
262             //add3.innerHTML = "<input type='button' value='修改' onclick='updateRow(this)'> <input type='button' value='删除' onclick='deleteRow(this)'>";
263             add4.innerHTML = "<input type='button' value='删除' onclick='deleteRow(this)'>";
264             
265             //alert(num);
266             //alert("添加成功！！");
267 
268         }
269     }
270 </script>

Table页 -

ASHX:

 1 <%@ WebHandler Language="C#" Class="LoadAllLogInfo" %>
 2 
 3 using System;
 4 using System.Web;
 5 using System.Data;
 6 using System.Linq;
 7 using System.Text;
 8 using System.Collections.Generic;
 9 using EFDataEntities;
10 using EFDemoLite.Data.Infrastructure;
11 using EFDemoLite.Data.Repositories;
12 
13 public class LoadAllLogInfo : IHttpHandler
14 {
15     public IPM_LogUploadInfoRepository logRep = new PM_LogUploadInfoRepository(DatabaseFactory.GetFactory());
16     public void ProcessRequest(HttpContext context)
17     {
18         context.Response.ContentType = "text/plain";
19         var list = logRep.GetAll().ToList();
20         var recList = new List<LogPathModel>();
21         foreach (var item in list)
22         {
23             recList.Add(new LogPathModel { 
24                 Lid=item.LID,
25                 Path=item.LogPath,
26                 PType=item.LogPathType=="0"?"絕對路徑":"相對路徑"
27             });  
28         }
29         System.Web.Script.Serialization.JavaScriptSerializer
30             js = new System.Web.Script.Serialization.JavaScriptSerializer();
31         string jsonStr = js.Serialize(recList);
32         context.Response.Write(jsonStr);
33     }
34     class LogPathModel
35     {
36         public string Lid { get; set; }
37         public string Path { get; set; }
38         public string PType { get; set; }
39     }
40     public bool IsReusable
41     {
42         get
43         {
44             return false;
45         }
46     }
47 
48 }

其他的ashx可参照此例