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- ...
随机推荐
- Swift 总结使用问号（?）和感叹号（!）-备用
在使用可选类型和可选链时,多次使用了问号(?)和感叹号(!),但是它们的含义是不同的,下面我来详细说明一下. 1. 可选类型中的问号(?) 声明这个类型是可选类型,访问这种类型的变量或常量时要使用感叹 ...
- 51单片机引脚ALE/PROG/PSEN/EA/Vpp
51单片机的4个控制引脚,其中一个引脚是复位引脚(RST/Vpd),RST是复位引脚,当RST输入端保持2个机器周期以上高电平时,就实现复位. ALE/PROG是地址锁存允许信号输出端,在读写外部存储 ...
- android中button点击频率控制
public class Utils { private static long lastClickTime; public static boolean isFastDoubleClick() { ...
- <转载>C++的链接错误LNK2005
转载http://bbs.csdn.net/topics/70346371 编程中经常能遇到LNK2005错误——重复定义错误,其实LNK2005错误并不是一个很难解决的错误.弄清楚它形成的原因,就可 ...
- hdu 5167 Fibonacci(预处理)
Problem Description Following is the recursive definition of Fibonacci sequence: Fi=⎧⎩⎨01Fi−1+Fi−2i ...
- shell脚本一条命令直接发送http请求(xjl456852原创)
我们知道nc命令是一个网络工具.可以连接tcp/udp.也能模拟发送http请求. 现在介绍通过shell脚本,一条命令直接发送http请求. 命令如下,可以对下面的地址等信息自行修改: #!/bin ...
- uva 111 History Grading(最长公共子序列）
题目连接:111 - History Grading 题目大意:给出一个n 代表序列中元素的个数, 然后是一个答案, 接下来是若干个同学的答案(直到文件结束为止), 求出两个序列的最长公共子序列, 注 ...
- 浅谈对JIT编译器的理解。
1. 什么是Just In Time编译器? Hot Spot 编译 当 JVM 执行代码时,它并不立即开始编译代码.这主要有两个原因: 首先,如果这段代码本身在将来只会被执行一次,那么从本质上看,编 ...
- samba后台进程及安全模式简介
识别 Samba 后台程序Linux 服务器通常作为守护程序(daemon) 来实现,这一词源于希腊神话,其中守护神(daemon)是超自然生物.Linux 守护程序在后台运行以便执行一些有用的任务. ...
- c#基础： NetWorkStream类的主要属性
一.网络流 1. 最常用的方法 Read() Write() Flush() NetworkStream netStream = new NetworkStream(mesock); ...