JQuery操作tr和td内容的方法实例


Posted in Javascript onMarch 06, 2013
<PRE class=html name="code"><html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link href="../esstec_css/style.css" type="text/css" rel="stylesheet" media="all" />
    <link href="../esstec_css/style.nk.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <link href="../esstec_css/Default.css" rel="stylesheet" type="text/css" />
    <link href="../esstec_css/BMS-Form.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#selEmployee").click(function () {
                var $table = $("#tbProEmployee tr");
                var len = $table.length;
                var trid = "tbProEmployee" + len;
                var strDeviceTr = "<tr id=" + trid + ">";
                strDeviceTr += "<td ><input id=\"txtEmployeeInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"" + "123" + "\" /><input id=\"txtInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"\" />";
                strDeviceTr += "<label id=\"txtEmployeeName\">" + "姓名" + "</label></td>";
                strDeviceTr += "<td><input id=\"txtRemark\" type=\"text\" name=\"ProjectEmployee\" /></td>";
                strDeviceTr += "<td ><a href=\"javascript:;SaveProEmployee('" + trid + "')\">保存</a> | <a href=\"javascript:;DelProEmployee('" + trid + "')\">删除</a></td>";
                strDeviceTr += " </tr>";
                $("#tbProEmployee").append(strDeviceTr);
            });
        });
        function SaveProEmployee(index) {
            //ajax保存
            var tr = $("tr[id=" + index + "]");
            var employee = tr.find("#txtEmployeeName").text();
            var remark = tr.find("#txtRemark").val();
            var strtd = "<td><input id=\"txtEmployeeInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"" + "123" + "\" /><input id=\"txtInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"\" />";
            strtd += "<label id=\"txtEmployeeName\">" + employee + "</label></td>";
            strtd += "<td ><label id=\"txtRemark\">" + remark + "</label></td>";
            strtd += "<td ><a href=\"javascript:;UpdateProEmployee('" + index + "')\">修改</a> | <a href=\"javascript:;DelProEmployee('" + index + "')\">删除</a></td>";
            tr.html(strtd);
        }
        function UpdateProEmployee(index) {
            //ajax保存
            var tr = $("tr[id=" + index + "]");
            var employee = tr.find("#txtEmployeeName").text();
            var remark = tr.find("#txtRemark").text();
            var strtd = "<td><input id=\"txtEmployeeInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"" + "123" + "\" /><input id=\"txtInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"\" />";
            strtd += "<label id=\"txtEmployeeName\">" + employee + "</label></td>";
            strtd += "<td><input id=\"txtRemark\" type=\"text\" name=\"ProjectEmployee\" value=\"" + remark + "\" /></td>";
            strtd += "<td ><a href=\"javascript:;SaveProEmployee('" + index + "')\">保存</a> | <a href=\"javascript:;DelProEmployee('" + index + "')\">删除</a></td>";
            tr.html(strtd);
        }
        function DelProEmployee(index) {
            if (confirm("Are you sure?")) {
                $("tr[id=" + index + "]").remove();
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="snippet download-list">
        <table class="telerik-reTable-2" id="tbProEmployee">
            <tbody>
                <tr>
                    <th colspan="3">
                        [<a id="selEmployee" href="javascript:void(0)">执行人员</a>]
                    </th>
                </tr>
                <tr>
                    <th>
                        姓名
                    </th>
                    <th>
                        备注
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html></PRE><BR>
<BR>
<PRE></PRE>
<PRE></PRE>
Javascript 相关文章推荐
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
node在两个div之间移动,用ztree实现
Mar 06 #Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 #Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 #Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 #Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 #Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 #Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 #Javascript
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Python模拟百度登录实例详解
2016/01/20 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python去除文件中重复的行实例
2018/06/29 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
python如何制作英文字典
2019/06/25 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
销售找工作求职信
2013/12/20 职场文书
园林资料员岗位职责
2013/12/30 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
班主任工作总结范文
2015/08/13 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
Python制作春联的示例代码
2022/01/22 Python
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫