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- ...
随机推荐
- mybatia的mypper.xml文件，参数类型为map,map里有一个键值对的值为数组，如何解析，例子可供参考，接上文，发现更简便的方法，不必传数组，只需传字符串用逗号隔开即可
是这样的 先看参数 map.put("orgId", "1818"); map.put("childDeps", "1000,10 ...
- UART与USART的区别
UART与USART都是单片机上的串口通信,他们之间的区别如下: 首先从名字上看: UART:universal asynchronous receiver and transmitter通用异步收/ ...
- NOI2015 小园丁与老司机
http://uoj.ac/problem/132 这道题前2行的输出比较容易,就是简单的动态规划,然后第3行就是比较少见的有上下界的最小流. 前2行比较容易,我们讨论一下第3行的解法吧. 比如第1个 ...
- 移动互联与O2O的完美衔接
移动互联网虽然市场颇大,前景广阔,但是由于数据过于密集,很难精准的定位所谓的目标客户群,然而O2O的线下市场却与互联网市场有极大的反差.一直觉得高校周边的小商家是最幸福的生意人,客户明确(就是本校学生 ...
- 关于<ul><ol><li>的用法
<ul>:无序列表 <ol>:有序列表 <li>:行. 想要去掉前面的序号和点可以在<ol>或<ul>style中用list-style: ...
- oracle数据库 ORA-12560: 协议适配器错误
ORA-12560: 协议适配器错误 造成ORA-12560: TNS: 协议适配器错误的问题的原因有三个: 1.监听服务没有起起来.windows平台个一如下操作:开始---程序---管理工具-- ...
- css中的列表样式
在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表 ...
- [Oracle] 使用触发器实现IP限制用户登录
在Oracle里,不像MySQL那样方便,可以直接在用户上进行IP限制,Oracle要实现用户级别的IP限制,可以使用触发器来迂回实现,下面是一个触发器的例子: create or replace t ...
- [Regex Expression] Use Shorthand to Find Common Sets of Characters
In this lesson we'll learn shorthands for common character classes as well as their negated forms. v ...
- gnuplot常用技巧
一. 基础篇: 在linux命令提示符下运行gnuplot命令启动,输入quit或q或exit退出. 1.plot命令 gnuplot> plot sin(x) with l ...