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();
        }
    }