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- ...
随机推荐
- iOS开发 - 不进入待机(屏幕保持唤醒)---UIApplication学习
iOS开发 - 不进入待机(屏幕保持唤醒)---UIApplication学习 如果你不希望应用运行时 iPhone 进入锁屏待机状态,加入下面这行代码即可 [[UIApplication share ...
- github如何删除一个repository(仓库)
昨天有人问我如何删除自己创建的一个项目,我浏览了一下github网站,确实不太容易找到删除功能.这里介绍一下啊如何在github上删除一个repository 一:首先点击进入你要删除的reposit ...
- 如何将android studio项目转换成eclipse
更新:虽然本人坚守eclipse很久,但是现在我也不再推荐继续用eclispe了,自己的项目用还没什么问题,但是你如果想用github上的项目,用eclispe会越来越难.如果你仍然感兴趣,继续看下面 ...
- HTTP methods 与 RESTful API
Note GET, primarily used to select resources. Other options for an API method include: POST, primari ...
- 8.1 Optimization Overview
8.1 Optimization Overview 8.1 Optimization Overview 8.2 Optimizing SQL Statements 8.3 Optimization a ...
- Linux企业级项目实践之网络爬虫（22）——编写爬虫系统服务控制脚本
需求:1.可通过 service spider start|stop|status|restart 命令对服务进行控制2.spider服务可开机自启动 start() { echo "sta ...
- Java Spring各种依赖注入注解的区别
Spring对于Bean的依赖注入,支持多种注解方式: @Resource javax.annotation JSR250 (Common Annotations for Java) @Inject ...
- n%i之和
题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1168 题意:给定一个n,注意这里n小于10^12,求 分析:早些时 ...
- Spring 的优秀工具类盘点第 1 部分
文件资源操作 文件资源的操作是应用程序中常见的功能,如当上传一个文件后将其保存在特定目录下,从指定地址加载一个配置文件等等.我们一般使用 JDK 的 I/O 处理类完成这些操作,但对于一般的应用程序来 ...
- 将Maven项目转换成Eclipse支持的Java项目
当我们通过模版(比如最简单的maven-archetype-quikstart插件)生成了一个maven的项目结构时,如何将它转换成eclipse支持的java project呢? 1. 定位到mav ...