zoukankan      html  css  js  c++  java
  • js 动态添加Table tr,选中与不选中checkbox行数NO的变化

    首次加载进入页面,如图:

    注:Table是在js中拼接字符串循环动态添加的(拼接字符串,详见之前随笔)

    点击Line2 checkbox后,效果如图:

    实现的效果就是: 点击checkbox — 显示本行的其他列的textbox,同时动态新增下一行NO行数+1,其他列的textbox隐藏;

                           取消checkbox —remove本行的所有数据,同时下面的一行向上移,NO行数-1;

    实现的js代码:

     1   function ShowEdit(obj) {
     2         //获取当前行数     
     3         var num = obj.id;
     4         num = $.trim(num.replace("gvItem_ck_", ""));
     5         if ($.trim($(obj).attr("id")) == "gvItem_ck_0") {
     6             $(obj).attr("checked", true);
     7             return;
     8         }
     9         if ($(obj).is(":checked") == true) {//点击checkbox
    10             $($(obj).parent().parent("tr")).each(function () {
    11                 $(this).find(".ck").find("input").attr("checked", "checked");
    12                 var a = $(this).find("td").eq(1).text();
    13                 $(obj).parent().nextAll().eq(1).find("input").css("display", "inline");
    14                 $(obj).parent().nextAll().eq(2).find("input").css("display", "inline");
    15                 $(obj).parent().nextAll().eq(3).find("input").css("display", "inline");
    16                 $(obj).parent().nextAll().eq(4).find("input").css("display", "inline");
    17                 $(obj).parent().nextAll().eq(5).find("input").css("display", "inline");
    18 
    19                 var trItem = "<tr align='center' id='line" + (parseInt(num) + 1) + "'><td><input id='gvItem_ck_" + (parseInt(num) + 1) + "' type='checkbox' class='ck' onclick='ShowEdit(this);'/></td>"
    20                  + "<td><span id='gvItem_lbNO_" + (parseInt(num) + 1) + "' class='lbNO'>" + (parseInt(a) + 1) + "</span></td>"
    21                  + "<td><input type='text' maxlength='50' id='gvItem_tbPN_" + (parseInt(num) + 1) + "' style='80%;display: none' class='tbPN'/></td>"
    22                  + "<td><input type='text' maxlength='50' id='gvItem_tbSN_" + (parseInt(num) + 1) + "' style='80%;display: none' class='tbSN'/></td>"
    23                  + "<td><input type='text' maxlength='3'  id='gvItem_tbQty_" + (parseInt(num) + 1) + "' style='80%;display: none' class='tbQty'  onkeyup='GetQty()'/></td>"
    24                  + "<td><input type='text' maxlength='30' id='gvItem_tbSRNo_" + (parseInt(num) + 1) + "' style='80%;display: none' class='tbSRNo'/></td>"
    25                  + "<td><input type='text' maxlength='30' id='gvItem_tbSRLineNo_" + (parseInt(num) + 1) + "' style='80%;display: none' class='tbSRLineNo' onkeyup='GetSRLineNo()'/></td></tr>";
    26                 $("#line" + num).after(trItem);
    27             });
    28         } else {//取消checkbox
    29             var trNode = $(obj).parent().parent();
    30             $($(obj).parent().parent().nextAll("tr")).each(function () {
    31                 var a = $(this).find("span").eq(0).text();
    32                 $(this).find("span").eq(0).text(a - 1);                
    33             });
    34             trNode.remove();
    35         }
    36     }
  • 相关阅读:
    卷积神经网络的权值参数个数的量化分析
    Torch 的安装与基本用法
    Torch 的安装与基本用法
    操作系统的 (program)loader(程序加载器)
    操作系统的 (program)loader(程序加载器)
    Python 模块学习:os模块
    Python 正则表达式-OK
    Perl参考函数
    svn: E200030: sqlite[S10]: disk I/O error
    Perl调用外部命令的方式和区别
  • 原文地址:https://www.cnblogs.com/bonnie-w/p/6491686.html
Copyright © 2011-2022 走看看