正文
Ajax结合Js操作灵活操作表格
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Table页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Scripts/jquery-1.7.1.js"></script>
<script src="../Scripts/jquery-1.7.1.min.js"></script>
<script src="../Scripts/jquery.reveal.js"></script>
<script type="text/ecmascript">
// 新增
function trdadd() {
flag = false;
document.getElementById("myModal").style.display = "block"; //控制显示
chongzhi();
document.getElementById("aid").disabled = false; //重新启用
}
//保存
function baocun() {
if (flag == false) {
add(flag);
document.getElementById("myModal").style.display = "none";
} else { add(flag);
document.getElementById("myModal").style.display = "none";
}
}
//重置
function chongzhi() {
document.getElementById("form1").reset();
}
//删除
function deleteRow(input) {
var s = input.parentNode.parentNode.rowIndex;
document.getElementById("tableid").deleteRow(s);
var num = document.getElementById("tableid").rows.length;
for (var i = 1; i < num; i += 1) {
table.rows[i].cells[0].innerHTML = i; //把每行的每一列设为i
}
//alert("删除成功！！");
}
$(function () {
initTable();//初始化表格
});
function initTable() {
$.getJSON("LoadAllMailInfo.ashx", "", function (data) {
$("#tbBody").html("");
for (var key in data) {
var strTr = "<tr style='height: 45px;'>";
strTr += "<td style='height: 25px;'>" + data[key].EID + "</td>";
strTr += "<td style='height: 25px;'>" + data[key].Recipients + "</td>";
strTr += "<td style='height: 25px;'>" + data[key].MailRecAddress + "</td>";
strTr += "<td style='height: 25px;'><input type='button' value='刪除' onclick='deleteRow(this)'></td>";
strTr += "</tr>";
$("#tbBody").append(strTr);
}
});
}
</script>
<style type="text/css">
.title_bg {
background-image: url(../images/titleBg.jpg);
font-size: 10.5pt;
font-family: Arial, "宋体";
color: #000000;
border: #A4A3A3 solid 1px;
text-align: center;
} .form_bg_nosize {
color: #000000;
border-width: 1pt;
border-style: solid;
border-color: #A4A3A3;
} .form_bg {
font-size: 10.5pt;
color: #000000;
border-width: 1pt;
border-style: solid;
border-color: #A4A3A3;
} .notvisible {
display: none;
} .auto-style1 {
border: 1pt solid #A4A3A3;
font-size: 10.5pt;
color: #000000;
width: 1074px;
} .auto-style2 {
background-image: url('../images/titleBg.jpg');
font-size: 10.5pt;
font-family: Arial, "宋体";
color: #000000;
border: #A4A3A3 solid 1px;
text-align: center;
width: 188px;
} .reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
z-index: 100;
display: none;
top: 0;
left: 0;
} .reveal-modal {
visibility: hidden;
top: 60px;
left: 50%;
margin-left: -150px;
width: 150px;
height: 70px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
background-color: #FFF;
} .reveal-modal.small {
width: 200px;
margin-left: -140px;
} .reveal-modal.medium {
width: 400px;
margin-left: -240px;
} .reveal-modal.large {
width: 600px;
margin-left: -340px;
} .reveal-modal.xlarge {
width: 800px;
margin-left: -440px;
} .reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: 0.5;
position: absolute;
top: 8px;
right: 11px;
color: #333;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
} body {
background-color: #F2F2F2;
font-size: 12px;
}
.td {
height:25px;
}
</style> </head>
<body>
<form id="form1" runat="server">
<center>
<table id="tableid" border="#A4A3A3 solid 0.5px;" cellpadding="0" cellspacing="0" width="540px;" style="text-align: center;">
<thead>
<tr style="height:40px">
<th style="width: 45px; height: 25px; font-weight: normal">編號</th>
<th style="width: 200px; height: 25px; font-weight: normal">收件人</th>
<th style="width: 200px; height: 25px; font-weight: normal">eMail</th>
<th><a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade" onclick="trdadd()"><input type="button" value="新增郵件" onclick="trdadd()"></a></th>
</tr>
</thead>
<tbody id="tbBody">
</tbody>
<div id="myModal" class="reveal-modal" style="width:200px;height:100px;display:none"">
<p>收件者 : <input id="aid" type="text" style="width:100px"></p>
<p>eMail : <input id="cid" type="text" style="width:100px"></p>
<h1><input type="button" value="保存" onclick="baocun()"> <input type="reset" value="重置" onclick=" chongzhi()"> </h1>
<a class="close-reveal-modal">×</a>
</div>
</table>
<div id="fid" style="display : none">
<form id="formid">
<table id="aaid">
<tr>
</tr>
</table>
</form>
</center>
</div> </form>
<input type="hidden" id="HidTd" />
</body>
</html>
<script type="text/javascript">
function GetTd() {
document.getElementById("HidTd").value = "";
var all = "";
var td1 = $("#tableid tr td:eq(4)").html();
var mytds = document.getElementsByTagName("td");
for (var i = 0; i < document.getElementsByTagName("td").length; i++) {
// all += mytds[i].innerText();
document.getElementById("HidTd").value += document.getElementsByTagName("td")[i].innerText + "|";
}
alert(document.getElementById("HidTd").value);
//alert(td1);
} //全局变量
var table = document.getElementById("tableid");
var flag = false;
var getselectrow;
function getNum() {
var haoRow = table.rows[0];
return haoRow.cells.length;
} //添加方法 function add(flag) {
if (!flag) {
// var num=getNum();
var newTD = document.createElement('td');
newTD.setAttribute('className', 'form_new');
newTD.setAttribute('align', 'center');
newTD.setAttribute('height', '45px');
//newTD.setAttribute('border', '0px');
var row = table.insertRow(-1); //为-1时往下加（升序），为0时往上加（id降序）
var add1 = row.insertCell(0);
var add2 = row.insertCell(1);
var add3 = row.insertCell(2);
var add4 = row.insertCell(3);
//var add5 = row.insertCell(4);
//var add6 = row.insertCell(5);
row.appendChild(newTD);
add1.innerHTML = document.getElementById("tableid").rows.length -1;//不加-1时id从二开始；原因：标题占一个
add2.innerHTML = document.getElementById("aid").value;
//add3.innerHTML = document.getElementById("bid").value;
add3.innerHTML = document.getElementById("cid").value;
var tall = document.getElementById("eid");
//var index = tall.selectedIndex;// 当前坐标
//var option = tall.options[index];
//add5.innerHTML = option.text;
//add6.innerHTML = "<input type='button' value='修改' onclick='updateRow(this)'> <input type='button' value='删除' onclick='deleteRow(this)'>";
//add3.innerHTML = "<input type='button' value='修改' onclick='updateRow(this)'> <input type='button' value='删除' onclick='deleteRow(this)'>";
add4.innerHTML = "<input type='button' value='删除' onclick='deleteRow(this)'>"; //alert(num);
//alert("添加成功！！"); }
}
</script>
Table页 -
ASHX:
<%@ WebHandler Language="C#" Class="LoadAllLogInfo" %> using System;
using System.Web;
using System.Data;
using System.Linq;
using System.Text;
using System.Collections.Generic;
using EFDataEntities;
using EFDemoLite.Data.Infrastructure;
using EFDemoLite.Data.Repositories; public class LoadAllLogInfo : IHttpHandler
{
public IPM_LogUploadInfoRepository logRep = new PM_LogUploadInfoRepository(DatabaseFactory.GetFactory());
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
var list = logRep.GetAll().ToList();
var recList = new List<LogPathModel>();
foreach (var item in list)
{
recList.Add(new LogPathModel {
Lid=item.LID,
Path=item.LogPath,
PType=item.LogPathType==""?"絕對路徑":"相對路徑"
});
}
System.Web.Script.Serialization.JavaScriptSerializer
js = new System.Web.Script.Serialization.JavaScriptSerializer();
string jsonStr = js.Serialize(recList);
context.Response.Write(jsonStr);
}
class LogPathModel
{
public string Lid { get; set; }
public string Path { get; set; }
public string PType { get; set; }
}
public bool IsReusable
{
get
{
return false;
}
} }
其他的ashx可参照此例
