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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
jQuery的框架介绍
May 11 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
小程序实现录音功能
Sep 22 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 事件机制(2)
2011/03/23 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python3处理HTTP请求的实例
2018/05/10 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
JPA的特点
2014/10/25 面试题
干部考核评语
2014/04/29 职场文书
求职信范文大全
2014/05/26 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
《山中访友》教学反思
2016/02/24 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python