js 动态添加Table tr，选中与不选中checkbox行数NO的变化

首次加载进入页面，如图：

注：Table是在js中拼接字符串循环动态添加的（拼接字符串，详见之前随笔）

点击Line2 checkbox后，效果如图：

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

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

实现的js代码：

   function ShowEdit(obj) {

         //获取当前行数

         var num = obj.id;

         num = $.trim(num.replace("gvItem_ck_", ""));

         if ($.trim($(obj).attr("id")) == "gvItem_ck_0") {

             $(obj).attr("checked", true);

             return;

         }

         if ($(obj).is(":checked") == true) {//点击checkbox

             $($(obj).parent().parent("tr")).each(function () {

                 $(this).find(".ck").find("input").attr("checked", "checked");

                 var a = $(this).find("td").eq(1).text();

                 $(obj).parent().nextAll().eq(1).find("input").css("display", "inline");

                 $(obj).parent().nextAll().eq(2).find("input").css("display", "inline");

                 $(obj).parent().nextAll().eq(3).find("input").css("display", "inline");

                 $(obj).parent().nextAll().eq(4).find("input").css("display", "inline");

                 $(obj).parent().nextAll().eq(5).find("input").css("display", "inline");

                 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>"

                  + "<td><span id='gvItem_lbNO_" + (parseInt(num) + 1) + "' class='lbNO'>" + (parseInt(a) + 1) + "</span></td>"

                  + "<td><input type='text' maxlength='50' id='gvItem_tbPN_" + (parseInt(num) + 1) + "' style='width:80%;display: none' class='tbPN'/></td>"

                  + "<td><input type='text' maxlength='50' id='gvItem_tbSN_" + (parseInt(num) + 1) + "' style='width:80%;display: none' class='tbSN'/></td>"

                  + "<td><input type='text' maxlength='3'  id='gvItem_tbQty_" + (parseInt(num) + 1) + "' style='width:80%;display: none' class='tbQty'  onkeyup='GetQty()'/></td>"

                  + "<td><input type='text' maxlength='30' id='gvItem_tbSRNo_" + (parseInt(num) + 1) + "' style='width:80%;display: none' class='tbSRNo'/></td>"

                  + "<td><input type='text' maxlength='30' id='gvItem_tbSRLineNo_" + (parseInt(num) + 1) + "' style='width:80%;display: none' class='tbSRLineNo' onkeyup='GetSRLineNo()'/></td></tr>";

                 $("#line" + num).after(trItem);

             });

         } else {//取消checkbox

             var trNode = $(obj).parent().parent();

             $($(obj).parent().parent().nextAll("tr")).each(function () {

                 var a = $(this).find("span").eq(0).text();

                 $(this).find("span").eq(0).text(a - 1);

             });

             trNode.remove();

         }

     }

巴特西

js 动态添加Table tr，选中与不选中checkbox行数NO的变化

最新文章

热门文章