当需要动态添加数据时,需要动态的改变表格的行数,并且每行的类型应该相同,此时可以使用下面的代码来完成需求

function delRow(obj) {
            if(window.confirm("你确定要删除该属性吗?")) {
                var num = $("#configTable tr").size();
                if(num <= 1) {
                    alert("请至少保留一行");
                    return;
                }
                var jTR = $(obj).parent().parent();
                jTR.remove();
            }
        }

function addRow() {
            var JTable = $("#configTable");
            var JTr = $("#configTable tr").eq(0);
            var JTrClone = JTr.clone(true);
            var TD = JTrClone.find("td:eq(5)");
            var SELECT = TD.find("select[name='enumValue']");
            var INPUT = TD.find("input:eq(0)");
            SELECT.empty().append($("<option>枚举值</option>"));
            INPUT.val("text");
            TD.hide();
            var JInput = JTrClone.find("input:eq(0)");
            var JSelect = JTrClone.find("select:eq(0)");
            for(var i=0;i<JInput.length;i++) {
                JInput.val("");
            }
            JSelect.get(0).options[0].selected = true;
            JTrClone.appendTo(JTable);
        }

<table id="configTable" width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="right" style="width:100px;">属性名</td>
                    <td align="left" style="vertical-align:middle;padding-left:3px;height:30px;">
                        <ui:textfield name="propertyKey"/>
                    </td>
                    <td align="right" style="width:100px;">属性类型</td>
                    <td align="left" style="vertical-align:middle;padding-left:3px;height:30px;">
                        <select οnchange="enumConfig(this);" name="selectValue">
                            <option value="text">文本类型</option>
                            <option value="date">日期类型</option>
                            <option value="enum">枚举类型</option>
                        </select>
                    </td>
                    <td align="center" style="padding-left:10px;">
                        <button type="button" class="stk-button stk-button-st-3" class="stk-button-icon ui-icon-circle-close"></span><span></span></button>
                    </td>
                    <td style="padding-left:10px; display:none;">
                        <input type="hidden" name="propertyType" value="text"/>
                        <input type="hidden" name="propertyValue" />
                        <select οnkeydοwn="enumDown(event,this);" οnkeypress="enumPress(event,this);" name="enumValue">
                            <option>枚举值</option>
                        </select>
                    </td>
                </tr>
            </table>

转载于:https://blog.51cto.com/2342615/600134

JQuery实现表格行当复制相关推荐

  1. html怎么复制到Excel表格里,把页面html导出到excel表格数据-如何将网页中的表格快速复制到EXCEL中...

    如何将html里面的table导出成excel 使用table2excel插件需要在页面中jquery和jquery.table2excel.js文件. HTML结构 你可以将任何的HTML表格结构的 ...

  2. iview表格批量复制粘贴

    iview表格批量复制粘贴 页面引入jq,vue cli项目先npm install jquery --save,再在页面中引入jq 表格盒子外设置id(方便jq绑定盒子内部的粘贴事件),页面初始化给 ...

  3. jquery计算表格列,求和

    jquery计算表格列,求和 有时候,需要统计网页上数据总数,系统没有提供该功能,需要手动计算,于是设计了这段代码 效果展示: 核心代码: $(function() {var totalRow = 0 ...

  4. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...

  5. 我的jQuery动态表格插件二

    本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...

  6. jquery实现表格的多行删除

    初学jquery,发现自己比较脑残的一味百度,找到一些代码,就想着运行,出现问题不知道怎么解决. 下面介绍如何运用jquery实现表格的多行删除 首先如果你没有jquery类库,要先下载jquery类 ...

  7. 手机端html表格,jQuery Mobile 表格

    jQuery Mobile 表格 响应式表格 响应式设计一般用于适配用户各种移动设备. 我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容. 响应式表格让页面 ...

  8. jQuery实现表格隔行换颜色:

    jQuery实现表格各行换颜色: 截图如下: 代码如下: <span style="font-family:Microsoft YaHei;font-size:14px;"& ...

  9. jQuery实现表格行上移下移和置顶

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

最新文章

  1. 373. Find K Pairs with Smallest Sums (java,优先队列)
  2. c# 任务栏托盘图标鼠标进入MouseEnter和鼠标离开MouseLeave实现
  3. win10下c/c++隐藏进程
  4. Intel Realsense 如何获取已连接所有摄像头的序列号参数?context() query_devices() size() camera_info device_list
  5. python or妙用
  6. python async_python async with和async for的使用
  7. 集合的定义与并查操作(C语言)
  8. python清空列表_Python之列表
  9. 苏州大学文正学院计算机专业,苏州大学文正学院有哪些专业及什么专业好
  10. 龙星电脑横机制版软件_简用仓库管理软件v8.6.3-简用仓库管理软件电脑版下载...
  11. 计算机二级office学习之Excel操作题考点整理
  12. iZotope RX 7 Advanced混音插件使用教程
  13. 邮件服务器公网IP被国外反垃圾联盟(PBL)列入黑名单移除操作方法
  14. 数字IC后端知识扫盲——OCV(上)
  15. Linux下的一些时间说明
  16. 分享一个免费好用的pdf转word工具
  17. SPSS 自动线性建模 模型导出方法
  18. 构造和析构函数的调用
  19. 目标检测之Loss:FasterRCNN中的SmoothL1Loss
  20. 签名签名签名签名签名签名签名

热门文章

  1. Java 8系列(一): 日期/时间- JSR310( Date and Time API)
  2. MongoDB文档对象字段属性合并的2种转换方法
  3. Django自身的CBV列表
  4. Jquery通过ajax请求NodeJS返回json数据
  5. 常见非关系型数据库(NoSQL)推荐介绍
  6. 用软件lm_sensors监测Linux系统和CPU温度(转)
  7. 对硬连接与软件连接的理解
  8. linux03-用户与组
  9. C语言 显示数组元素的值和地址
  10. java file.canexecute_Java File canExecute()用法及代碼示例