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对象及属性
Feb 13 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
原生JS实现幻灯片
Feb 22 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
深入理解node.js之path模块
May 03 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
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
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[00:35]可解锁地面特效
2018/12/20 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
python中as用法实例分析
2015/04/30 Python
python中zip()方法应用实例分析
2016/04/16 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
保时捷设计:Porsche Design
2019/03/30 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
珍惜水资源建议书
2014/03/12 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技