jquery实现当前页面编辑
实现效果
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript"> $(function () {
//点击行变色
$("[id$='rpInterCourse'] tr").slice(1).each(function () {
$(this).click(function () {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
}
else {
$(this).addClass("selected");
}
});
});
})
// 更多
function moreInterCourse() { var url = "/Client/ShowGvClientInterCourseList";
ws.base.showDialog({ url: url, height: "500px", width: "800px" }); }
// 编辑
function returnEdit(ProductID, data) {
var pricetd = $(data).parent().parent("tr");
var tr = pricetd.children("td");
// 交流时间
var inputInterTime = tr.eq(1).find("input");
var lableInterTime = tr.eq(1).find("label");
inputInterTime.attr('style', 'display: block');
lableInterTime.attr('style', 'display: none');
// 专员
var inputCreator = tr.eq(2).find("input");
var lableCreator = tr.eq(2).find("label");
inputCreator.attr('style', 'display: block');
lableCreator.attr('style', 'display: none');
// 交流方法
var selectInterMethod = tr.eq(3).find("select");
var lableInterMethod = tr.eq(3).find("label");
selectInterMethod.attr('style', 'display: block');
lableInterMethod.attr('style', 'display: none');
// 交流类型
var selectInterType = tr.eq(4).find("select");
var lableInterType = tr.eq(4).find("label");
selectInterType.attr('style', 'display: block');
lableInterType.attr('style', 'display: none'); // 添加确定取消
$(data).css("display", "none").parent().append("<span id='SumitOrCancel'><a href='#' onclick='returnSumit(this," + ProductID + ")'>確定</a><a href='#' onclick='returnCancel(this)'>取消</a></span>");
}
// 取消操作
function returnCancel(data) {
$(data).parent().prev().css("display", "");
var tr = $(data).parent().parent().parent("tr").children("td"); ;
// 交流时间
var inputInterTime = tr.eq(1).find("input");
var lableInterTime = tr.eq(1).find("label");
inputInterTime.attr('style', 'display: none');
lableInterTime.attr('style', 'display: block');
// 专员
var inputCreator = tr.eq(2).find("input");
var lableCreator = tr.eq(2).find("label");
inputCreator.attr('style', 'display: none');
lableCreator.attr('style', 'display: block');
// 交流方法
var selectInterMethod = tr.eq(3).find("select");
var lableInterMethod = tr.eq(3).find("label");
selectInterMethod.attr('style', 'display: none');
lableInterMethod.attr('style', 'display: block');
// 交流类型
var selectInterType = tr.eq(4).find("select");
var lableInterType = tr.eq(4).find("label");
selectInterType.attr('style', 'display: none');
lableInterType.attr('style', 'display: block');
// 将确定根取消按钮移除
$("#SumitOrCancel").remove(); }
// 添加客户交流记录
function AddInterCourse() {
var url = "/Client/ClientInterCourseAdd?clientID=2C1FD8F7-9C6D-4507-91BA-01B28B8FFB77";
ws.base.showDialog({ url: url, height: "500px", width: "800px" });
}
</script>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/ws.base.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="position: absolute; display: inline; width: 60px">
<a id="btnMail" href="javascript:void(0);" title="添加" class="easyui-linkbutton" iconcls="icon-add"
plain="true" visible="false" onclick="AddInterCourse()">添加</a>
</div>
<div style="float: right; width: 40px;">
<div style="float: right; width: 40px;">
<a href="javascript:void(0)" onclick="moreInterCourse()">更多</a></div>
</div>
<div style="height: 15px;">
</div>
<table>
<asp:Repeater ID="rpInterCourse" runat="server">
<HeaderTemplate>
<thead>
<tr>
<th>
序号
</th>
<th>
交流时间
</th>
<th>
专员
</th>
<th>
交流方法
</th>
<th>
交流类型
</th>
<th>
编辑
</th>
<th>
录入订单
</th>
<th>
听取录音
</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<td>
<%# this.rpInterCourse.Items.Count + 1 %>
</td>
<td>
<label>
<%#Eval("InterTime")%></label>
<%#Html.TextBox("InterTime", Eval("InterTime"), new { @class = "easyui-datebox", style = "display:none;" })%>
</td>
<td>
<label>
<%#Eval("CreatorName")%></label>
<%#Html.TextBox("Creator", Eval("CreatorName"), new { style = "display:none;" })%>
</td>
<td>
<%#Html.Label("interMethod", WS.Base.App.Business.CodeBusiness.GetCode("interMethod", Eval("InterMethod")).DetailName)%>
<%#Html.DropDownList("interMethod2", WS.Base.App.Business.CodeBusiness.GetCode("interMethod",
Eval("InterMethod").ToString(), true), new { @class = "easyui-combobox", style = "width:150px;display:none;", panelHeight = "auto" })%>
</td>
<td>
<%#Html.Label("interType", WS.Base.App.Business.CodeBusiness.GetCode("interType", Eval("interType")).DetailName)%>
<%#Html.DropDownList("interType2", WS.Base.App.Business.CodeBusiness.GetCode("interType",
Eval("InterType").ToString(), true), new { @class = "easyui-combobox", style = "width:150px;display:none;", panelHeight = "auto" })%>
</td>
<td>
<a href="#" onclick="returnEdit('@item.ID',this)">編輯</a>
</td>
<td>
<a href="#" onclick="returnEdit('@item.ID',this)">
<%#Eval("OrderInfo")%></a>
</td>
<td>
<a href="#" onclick="returnEdit('@item.ID',this)">听取录音</a>
</td>
</tbody>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
</form>
</body>
</html>
jquery实现当前页面编辑的更多相关文章
- Jquery easyui开启行编辑模式增删改操作
Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...
- [转]Jquery easyui开启行编辑模式增删改操作
本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...
- myeclipse页面编辑框空格、回车符、对齐出现特殊字符
myeclipse页面编辑框空格.回车符.对齐出现特殊字符 解决办法:window-preferences-general-editors-Text Editors 把show whitespa ...
- jquery加载页面的方法
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&q ...
- jquery加载页面的方法(页面加载完成就执行)
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&qu ...
- jQuery自定义Web页面鼠标右键菜单
jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...
- jquery如何获得页面元素的坐标值
http://www.cnblogs.com/pansly/archive/2011/05/25/2056222.html jquery如何获得页面元素的坐标值 yulutxt是输入经典语录的输入 ...
- js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值
js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值本文介绍jquery/js获取当前页面url地址的方法,在jquery与js中获取当前页面url方法是一样的,因为jque ...
- jquery mobile切换页面的几种方法
jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...
随机推荐
- 完美解决android软键盘监听
最近在做应用性能调优,发现在一个包含有输入框的Activity中,当软键盘弹出的时候,如果直接finish掉此Activity,那么在返回到上一个Activity时,界面的渲染会由于软键盘没有及时的收 ...
- TestNG使用Eclipse建立Test Case - 就是爱Java
除了JUnit可以进行单元测试外,还可以使用TestNG来撰写Test Case,这是另一种测试Framework,它是为更广泛的测试场合而设计,可以运行在没有修改过的JUnit测试,除非看到它们的i ...
- Codeforces 219D Choosing Capital for Treeland
http://codeforces.com/problemset/problem/219/D 题目大意: 给出一棵树,但是它的边是有向边,选择一个城市,问最少调整多少条边的方向能使一个选中城市可以到达 ...
- Linux 删除空行
在Linux上处理一些数据文件时,有时候需要将其中的空行过滤掉,系统中提供的各种工具都可以完成这个功能.将常用的介绍如下吧:1. grep grep . data.txt grep -v '^$' d ...
- 关于selenium中的sendKeys()隔几秒发送一个字符
看一下你的IEDriverServer.exe是不是64位的,我也遇到了这样的问题,换成32位的IEDriverServer.exe,瞬间速度快了
- poj1881：素因子分解+素数测试
很好的入门题 先测试是否为素数,若不是则进行素因子分解,算法详见总结贴 miller robin 和pollard rho算法 AC代码 #include <iostream> #incl ...
- python部落刷题宝学到的内置函数
最近加入了python部落,感觉里面的刷题宝很有意思,玩了一下,知道了许多以前并不清楚的内置函数,然后感觉到快要记不住了,所以开始陈列一下 1.divmod(a,b):取a除以b的商和余数,功效等价于 ...
- CPU使用率统计办法
我们在搞性能测试的时候,对后台服务器的CPU利用率监控是一个常用的手段.服务器的CPU利用率高,则表明服务器很繁忙.如果前台响应时间越来越大,而后台CPU利用率始终上不去,说明在某个地方有瓶颈了,系统 ...
- WPF - XAML如何引入名字空间
WPF 的XAML引入名字空间的概念,经常容易让人混淆.如何引入名字空间,并且在XAML中调用其中的类,下面给一个简单的介绍. 比如我们有一个Hepler类. namespace Wheat.PIMS ...
- [Qt] fontawesome图标
fontawesome图标 fontawesome是一个图标的集合,里面有好多的图标,使用起来也还是非常方便的. 图标信息可以到官网去查:http://fontawesome.io/cheatshee ...