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] ///参数为要合并的列}) /** * ...
随机推荐
- win8下光驱消失
导入这个注册表后重启,总算能读了..reg add "HKLM\System\CurrentControlSet\Services\atapi\Controller0" /f /v ...
- java基础（二十一）IO流（四）
这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...
- JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...
- UVA 3890 Most Distant Point from the Sea（二分法+半平面交）
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=11358 [思路] 二分法+半平面交 二分与海边的的距离,由法向量可 ...
- RHEL7磁盘分区挂载和格式化
安装大数据平台,每台机器需要挂载10个磁盘,用JBOD模式,操作系统为RHEL7.2. 写了两个脚本,format_disk.sh和mount_disk.sh实现磁盘自动分区格式化以及挂载,修改fst ...
- 【Caffe 测试】Training LeNet on MNIST with Caffe
Training LeNet on MNIST with Caffe We will assume that you have Caffe successfully compiled. If not, ...
- 【ImageMagick】Unix Windows 源码安装
[ Unix 源码安装 | Windows 源码安装 ] 首先检查一下电脑里已经安装的ImageMagick版本,输入: convert -version 除非你想要把对另外的图像格式的支持或升级 ...
- iOS 隐藏Tabbar
两种方法用来隐藏tabBar 1.在本页面隐藏 #pragma mark - 隐藏tabBar - (void)viewWillAppear:(BOOL)animated{ self.tabBarC ...
- Cookie案例分析
一.案例- 显示用户上次访问的时间 当用户第一次访问该页面的时候提示:你好,你是第一次访问本页面,当前时间为:2016-11-3 22:10:30 第n次访问该页面时:欢迎回来,你上次访问的时间是:2 ...
- Nginx平台构架 分类： Nginx 2015-07-13 10:55 205人阅读 评论(0) 收藏
深入理解Nginx模块发开与架构解析读书笔记. nginx在启动后,在unix系统中会以daemon的方式(可以手动关闭 nginx.conf daemon off)在后台运行,后台进程包含一个mas ...