首次加载进入页面,如图:
注: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 }