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- ...
随机推荐
- soapUI通过groovy脚本设置超时时间
import com.eviware.soapui.SoapUI import com.eviware.soapui.settings.HttpSettings import com.eviware. ...
- Codeforces 545C Woodcutters
http://codeforces.com/contest/545/problem/C 题目大意: 给n棵树的在一维数轴上的坐标,以及它们的高度.现在要你砍倒这些树,树可以向左倒也可以向右倒,砍倒的树 ...
- QT树莓派交叉编译环开发环境搭建（附多个exe工具下载链接）
前两天入手了一块2.8’的tft液晶显示屏,于是和树莓派连了一发,成功将命令行显示在了这块小的可怜的屏幕上之后,觉得这屏幕就显示个黑白内容太浪费了,于是考虑开发一个”脸”(图形用户界面,GUI).首先 ...
- java web: eclipse & maven & jetty & struts2 & mysql = 简单登录页面
第一次接触java web开发,花费了一天半的时间,写了个简单的登录页面,以此文为记. 开发工具 Eclipse Luna Release (4.4.0) 已集成maven,maven目前的体会就是管 ...
- codility上的问题 （23）Chi 2012
这个题也比较有意思.意思是给定一个数组A,长度为M,里面都是正整数,代表每块地形的高度.现在要测试一种加农炮,给定一个炮弹的高度H, 如果存在最小的I,满足0 < I < M,满足A[I ...
- Delphi 把字符串读到流中的操作。
var FReQuestM := TMemoryStream FReQuestM.Write(PChar(FcVoucherXML)^, Length(FcVoucherXML)); 这样就读到流中了 ...
- poj1014：母函数+优化
题目大意: 有1~6六种宝石,价格分别为1~6 ..给定每种宝石的个数,问能否平分给两个人 分析: 一看显然是个多重背包问题,也可以用母函数做 不过母函数的复杂度是n*v*k,第一次tle了.. 后来 ...
- 算法导论（第三版）Exercises4.2(第四章二节）
4.2-1(计算结果) 18 14 62 66 4.2-2(Strassen算法计算矩阵乘法) void multiplyMatrix(int a[], int b[], int n, int r ...
- 修改xcode代码风格设置
1.找到文件:/Applications/Xcode.app/Contents/PlugIns/IDECodeSnippetLibrary.ideplugin/Contents/Resources/S ...
- paip.索引优化---sql distict—order by 法
paip.索引优化---sql distict—order by 法 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog ...