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可参照此例
Ajax结合Js操作灵活操作表格的更多相关文章
- js如何操作表格（常用属性方法汇总）
js如何操作表格(常用属性方法汇总) 一.总结 一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...
- Js动态操作表格
HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...
- JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS动态生成表格后 合并单元格
JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- 超级简单的jquery操作表格(添加/删除行、添加/删除列)
利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
- Jquery操作表格多出一个内容行
目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
随机推荐
- UIImagePickerController 如何显示中文界面
1: 添加中文的 Localizations Project --> Info --> Localizations 添加 "Chinese(Simplified)" ...
- SharePoint用户控件编写的简单介绍
转:http://www.it165.net/design/html/201204/1131.html 我们开发中,通常需要写各种各样的部件来实现我们的展示或者功能,下面就介绍下刚刚接触的QuickP ...
- （转载）1248 - Every derived table must have its own alias
(转载)http://hi.baidu.com/lylegend13/item/a79f17eb51f5dff7e0a5d43b 1. select count(distinct CName) fro ...
- 贪心（模拟费用流）：NOIP2011 观光公交
[问题描述] 风景迷人的小城Y 市,拥有n 个美丽的景点.由于慕名而来的游客越来越多,Y 市特意安排了一辆观光公交车,为游客提供更便捷的交通服务.观光公交车在第0 分钟出现在1号景点,随后依次前往2. ...
- HDU 5965 扫雷 【模拟】 (2016年中国大学生程序设计竞赛（合肥）)
扫雷 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submissi ...
- android学习—— LayoutInflater的使用
在实际开发种LayoutInflater这个类还是非常有用的,它的作用类似于findViewById(),不同点是LayoutInflater是 用来找layout下xml布局文件,并且实例化!而fi ...
- Method Overloading in WCF zt
Method overloading is the process of implementing Polymorphism in Object-Oriented Programming. A met ...
- Eclipse无法识别Android真机的解决方法
使用IORegistryExplorer(在Developer Tool)可以查看连接上的USB设备的信息.选择IOUSB,可以看到名为连线的安卓设备,比如小米idVendor是0x2717. ech ...
- 作品第一课----获取批量checkbox选中的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vss搭建于操作
1.下载的vvs2005,下载后先安装在服务器上,反正就是下一步下一步就对了 安装完成后,打开miscrosoft visual sourcesafe,---create connection da ...