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- ...

随机推荐

ubuntu12.04安装jdk-7u79-linux-i586.tar.gz
第一步:下载jdk-7u79-linux-i586.tar.gz 1.wget -c http://download.oracle.com/otn-pub/java/jdk/7/jdk-7-linux ...
hadoop集群的故障概率估算
hadoop集群的机器数业界(国内)最大的在5000左右,是什么限制了集群的规模呢?有好几个原因. 1. namenode的内存大小限制 2. 机器故障概率随着机器数目增大而增大,通常一份数据存储在h ...
hdu Fibonacci
#include <cstdio> #include <cstring> #include <cmath> #include <algorithm> u ...
C++中new和delete的背后（ call edx 调用虚表内的第二个函数（析构函数））
关于 C++中new背后的行为, 以前已经写过一篇了理解C++中new背后的行为, 但是里面也只是泛泛而谈,没有真凭实据, 下面我们从汇编的角度看C++编译器究竟在背后干了什么? 我们的代码很简 ...
Cross-compiling Qt Embedded 5.5 for Raspberry Pi 2
This tutorial shows how to cross-compile the Embedded build of Qt 5.5 for Raspberry Pi 2. The Embedd ...
SeekBar.OnSeekBarChangeListener解析
public static interface SeekBar.OnSeekBarChangeListener android.widget.SeekBar.OnSeekBarChangeListen ...
ZooKeeper编程指导
简介对于想要利用ZooKeeper的协调服务来创建一个分布式应用的开发人员来说,这篇文章提供了指导.包含了一些概念和实际性操作的信息. 这篇文章的前四个章节介绍了各种ZooKeeper的概念,这对理 ...
Day56
今天干啦啥呢早上七点起来天气冷了真起不来啊再坚持坚持就好了今天上午九点开始考数据库我去大学四年第一次感觉到这样的爽作弊的爽啊也没有完全的作弊啦是开卷考试,反正做的很顺利了. 我和胡 ...
jQuery 各种选择器 $.()用法
jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选 ...
Android开源代码解读のOnScrollListener实现ListView滚屏时不加载数据
使用ListView过程中,如果滚动加载数据的操作比较费时,很容易在滚屏时出现屏幕卡住的现象,一个解决的办法就是不要在滚动时加载数据,而是等到滚动停止后再进行数据的加载.这同样要实现OnScrollL ...

jquery实现当前页面编辑

jquery实现当前页面编辑的更多相关文章

随机推荐

热门专题