如何使用在javascript中选中的复选框将表行附加到一个表到另一个表

Question

我有两个表，第一个表有复选框，如果我单击该复选框，该行只会附加到第二个表，包括值，如果我取消选中该复选框，该行将删除第二个表..

在这里，我的问题是第一行是静态行，它仅适用于静态行，我不想使用静态行，我只想为动态行工作。

示例：如果我单击了仅选中行（最近）的复选框，则想要附加第二个表。

我编写了一些代码将行附加到另一个表。

这是我的代码。

完整代码在这里..

样品在这里..

 // Create New table var counter = -1; window.updateIds = function() { $.each($("[row-number]"), function(index, item) { $(this).attr("row-number", (index - 1)); $("[id^=itemNo]", $(this)).attr("id", "itemNo" + (index - 1)); }); } window.createTable = function() { counter++; var itemNo = document.getElementById("serialNo").value; var itemName = $("#it_name1 option:selected").text(); // var itemCode = document.getElementById("it_code1").value; var itemCode = $("#it_code1 option:selected").text(); var description = document.getElementById("it_desc1").value; var itemUom = document.getElementById("uomTable1").value; var qty = document.getElementById("qty1").value; // var reqNo = document.getElementById("reqNo1").value; var reqNo = $("#reqNo1 option:selected").text(); $('#totalRowCount').text(counter - 0); var htmlText = ''; htmlText += '<tr class="first" row-number="' + counter + '">'; htmlText += '<td class="itemNumber" style="min-width: 80px;">'; htmlText += '<input type="checkbox" class="led-btn checkNew" name="selpoNO[' + counter + '].valu" id="selpoNO' + counter + '" style="width: 13px;">'; htmlText += '</td>'; htmlText += '<td class="itemNumber" style="min-width: 80px;">'; htmlText += '<input type="text" id="itemNo' + counter + '" class="form-control" name="serialNo[' + counter + '].valu" value="' + itemNo + '" readonly>'; htmlText += '</td>'; htmlText += '<td>'; htmlText += '<select class="form-control" id="itemName' + counter + '">'; htmlText += '<option>' + itemName + '</option>'; htmlText += '</select>'; htmlText += '</td>'; htmlText += '<td>'; htmlText += '<select class="form-control" id="itemCode' + counter + '">'; htmlText += '<option>' + itemCode + '</option>'; htmlText += '</select>'; htmlText += '</td>'; htmlText += '<td class="itemNumber">'; htmlText += '<input type="text" id="itemDescript' + counter + '" placeholder="Description" class="form-control" placeholde="Description" name="" value="' + description + '">'; htmlText += '</td>'; htmlText += '<td class="itemNumber" style="min-width: 140px;">'; htmlText += '<input type="text" id="itemUom' + counter + '" class="form-control" placeholder="Enter Uom in kg" name="" value="' + itemUom + '">'; htmlText += '</td>'; htmlText += '<td class="itemNumber" style="min-width: 140px;">'; htmlText += '<input type="text" id="qty' + counter + '" class="form-control" name="" placeholder="Quantity" value="' + qty + '">'; htmlText += '</td>'; // htmlText += '<td class="itemNumber">'; // htmlText += '<input type="text" id="itemAval' + counter + '" class="form-control" name="" value="' + itemAval + '">'; // htmlText += '</td>'; htmlText += '<td class="itemNumber" style="min-width: 140px !important;">'; htmlText += '<button type="button" class="dlRow del"><i onclick="deleteRows();">Delete</button></i>'; htmlText += '</td>'; htmlText += '</tr>'; htmlText += '</tbody>'; htmlText += '</table>'; $('#tableBody').append(htmlText); var sum = 0; $('.tAmount').each(function() { sum += parseFloat($(this).val()); }); $('#grandTotal').val(sum); updateIds(); removeStaticVal(); } // Delete rows window.deleteRows = fdeleteRows = function() { $('.del').click(function() { $(this).parent().parent().remove(); var sum = 0; $('.tAmount').each(function() { sum += parseFloat($(this).val()); }); $('#grandTotal').val(sum); updateIds(); }); } // table checkbox function $(":checkbox").on("click", function() { if ($(this).is(":checked")) { alert("if"); // $(this).closest("td").siblings("td").each(function() { $(this).closest('tr').find("td:eq(0) .checkNew").each(function() { // $("#tab_logic2 tbody").append($(this).text()); alert('executed'); var sno = $(this).closest('tr').find("td:eq(1) input").val(); var iName = $(this).closest('tr').find("td:eq(2) input").val(); var iCode = $(this).closest('tr').find("td:eq(3) input").val(); var iDect = $(this).closest('tr').find("td:eq(4) input").val(); var iUom = $(this).closest('tr').find("td:eq(5) input").val(); var iQty = $(this).closest('tr').find("td:eq(6) input").val(); $("#tab_logic2 tbody").append('<tr><td style="min-width: 80px;"><input type="text" id="sm_supp" value="' + sno + '" class="form-control newStyle1" name="sm_supp" readonly></td><td style="min-width: 140px;"><select class="form-control" id="iReqNo" name="iReqNo"><option>Choose Requitition no</option></select></td><td style="min-width: 140px;"><select class="form-control" id="inames" name="inames" value="' + iName + '"><option>Choose Item name</option></select></td><td style="min-width: 140px;"><select class="form-control" id="icode" name="icode" value="' + iCode + '"><option>Choose Item code</option></select></td><td style="min-width: 350px;"><input type="text" id="" value="' + iDect + '" class="form-control" name="sm_code" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iUom + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iQty + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><button type="button" class="dlRow del">x</button></a></td></tr>'); }); } else { alert('else section'); $("#tab_logic2 tbody").html(""); // $(":checkbox:checked").closest("td").siblings("td").each(function() { $(this).closest('tr').find("td:eq(0) .checkNew").each(function() { $("#tab_logic2 tbody").append('<tr><td style="min-width: 80px;"><input type="text" id="sm_supp" value="' + sno + '" class="form-control newStyle1" name="sm_supp" readonly></td><td style="min-width: 140px;"><select class="form-control" id="iReqNo" name="iReqNo"><option>Choose Requitition no</option></select></td></td><td style="min-width: 140px;"><select class="form-control" id="inames" name="inames" value="' + iName + '"><option>Choose Item name</option></select></td><td style="min-width: 140px;"><select class="form-control" id="icode" name="icode" value="' + iCode + '"><option>Choose Item code</option></select></td><td style="min-width: 350px;"><input type="text" id="" value="' + iDect + '" class="form-control" name="sm_code" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iUom + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iQty + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><button type="button" class="dlRow del">x</button></a></td></tr>'); }); } });

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- Table --> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="table-wrapper"> <div class="table-scroll"> <table class="table table-bordered" id="tab_logic"> <thead> <tr style="background-color: #680779; color: #fff;"> <th style="min-width: 80px;"> # </th> <th style="min-width: 80px;"> S.no </th> <th class="text-center"> Item Name </th> <th class="text-center"> Item Code </th> <th style="min-width: 350px;"> Description </th> <th style="min-width: 140px;"> UOM </th> <th style="min-width: 140px;"> Quantity </th> <th style="min-width: 140px !important;"> Action </th> </tr> </thead> <tbody id="tableBody"> <tr class="first" row-number="0" style="padding-bottom: 20%;"> <td style="min-width: 80px;"> <input type="checkbox" class="led-btn checkNew" name="selpoNO" id="selpoNO" value="PO" style="width: 13px;"> </td> <td style="min-width: 80px;"> <input type="number" value="1" id="serialNo" class="form-control" name="serialNo" placeholder="S.No" readonly/> </td> <td class="common_td"> <select class="form-control newRw3 clrRow sel_text" id="it_name1" name="it_name"> <option value="">Choose an items</option> <option value="1">100</option> <option value="2">200</option> <option value="3">300</option> <option value="4">400</option> <option value="5">500</option> </select> </td> <td class="common_td"> <select class="form-control" id="it_code1" name="it_code1"> <option value="">Choose item code</option> <option value="1">100</option> <option value="2">200</option> <option value="3">300</option> <option value="4">400</option> <option value="5">500</option> </select> </td> <td style="min-width: 350px;"> <input type="text" id="it_desc1" class="form-control" name="it_desc" placeholder="Item Description" /> </td> <td style="min-width: 140px;"> <input type="text" id="uomTable1" class="form-control newRw3 clrRow sel_text required" name="uomTable" placeholder="Enter Uom in kg" /> </td> <td style="min-width: 140px;"> <input type="text" id="qty1" name="qty" class="form-control" placeholder="Quantity" /> </td> <td style="min-width: 140px !important;"> <input type="button" class="dlRow" id="total1" value="Add" onclick="createTable();"> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <!-- Second table --> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="table-wrapper"> <div class="table-scroll"> <table class="table table-bordered" id="tab_logic2"> <thead> <tr style="background-color: #680779; color: #fff;"> <th style="min-width: 80px;"> S.no </th> <th style="min-width: 140px;"> Requistition No </th> <th style="min-width: 140px;"> Item Name </th> <th style="min-width: 140px;"> Item Code </th> <th style="min-width: 350px;"> Description </th> <th style="min-width: 140px;"> UOM </th> <th style="min-width: 140px;"> Quantity </th> <th style="min-width: 140px;"> Action </th> </tr> </thead> <tbody id="myNewtbody"> </tbody> </table> </div> </div> </div> </div> </div>

Answer 1

您可以使用委托方法将事件与:gt() （大于）选择器一起附加。

改变：

$(":checkbox").on("click", function() {

到：

//This will raise the event on all the checkboxes except the first one
$("table").on("click", ":checkbox:gt(0)", function() { 

 // Create New table var counter = -1; window.updateIds = function() { $.each($("[row-number]"), function(index, item) { $(this).attr("row-number", (index - 1)); $("[id^=itemNo]", $(this)).attr("id", "itemNo" + (index - 1)); }); } window.createTable = function() { counter++; var itemNo = document.getElementById("serialNo").value; var itemName = $("#it_name1 option:selected").text(); // var itemCode = document.getElementById("it_code1").value; var itemCode = $("#it_code1 option:selected").text(); var description = document.getElementById("it_desc1").value; var itemUom = document.getElementById("uomTable1").value; var qty = document.getElementById("qty1").value; // var reqNo = document.getElementById("reqNo1").value; var reqNo = $("#reqNo1 option:selected").text(); $('#totalRowCount').text(counter - 0); var htmlText = ''; htmlText += '<tr class="first" row-number="' + counter + '">'; htmlText += '<td class="itemNumber" style="min-width: 80px;">'; htmlText += '<input type="checkbox" class="led-btn checkNew" name="selpoNO[' + counter + '].valu" id="selpoNO' + counter + '" style="width: 13px;">'; htmlText += '</td>'; htmlText += '<td class="itemNumber" style="min-width: 80px;">'; htmlText += '<input type="text" id="itemNo' + counter + '" class="form-control" name="serialNo[' + counter + '].valu" value="' + itemNo + '" readonly>'; htmlText += '</td>'; htmlText += '<td>'; htmlText += '<select class="form-control" id="itemName' + counter + '">'; htmlText += '<option>' + itemName + '</option>'; htmlText += '</select>'; htmlText += '</td>'; htmlText += '<td>'; htmlText += '<select class="form-control" id="itemCode' + counter + '">'; htmlText += '<option>' + itemCode + '</option>'; htmlText += '</select>'; htmlText += '</td>'; htmlText += '<td class="itemNumber">'; htmlText += '<input type="text" id="itemDescript' + counter + '" placeholder="Description" class="form-control" placeholde="Description" name="" value="' + description + '">'; htmlText += '</td>'; htmlText += '<td class="itemNumber" style="min-width: 140px;">'; htmlText += '<input type="text" id="itemUom' + counter + '" class="form-control" placeholder="Enter Uom in kg" name="" value="' + itemUom + '">'; htmlText += '</td>'; htmlText += '<td class="itemNumber" style="min-width: 140px;">'; htmlText += '<input type="text" id="qty' + counter + '" class="form-control" name="" placeholder="Quantity" value="' + qty + '">'; htmlText += '</td>'; // htmlText += '<td class="itemNumber">'; // htmlText += '<input type="text" id="itemAval' + counter + '" class="form-control" name="" value="' + itemAval + '">'; // htmlText += '</td>'; htmlText += '<td class="itemNumber" style="min-width: 140px !important;">'; htmlText += '<button type="button" class="dlRow del"><i onclick="deleteRows();">Delete</button></i>'; htmlText += '</td>'; htmlText += '</tr>'; htmlText += '</tbody>'; htmlText += '</table>'; $('#tableBody').append(htmlText); var sum = 0; $('.tAmount').each(function() { sum += parseFloat($(this).val()); }); $('#grandTotal').val(sum); updateIds(); removeStaticVal(); } // Delete rows window.deleteRows = fdeleteRows = function() { $('.del').click(function() { $(this).parent().parent().remove(); var sum = 0; $('.tAmount').each(function() { sum += parseFloat($(this).val()); }); $('#grandTotal').val(sum); updateIds(); }); } // table checkbox function $("table").on("click", ":checkbox:gt(0)", function() { if ($(this).is(":checked")) { var id = $(this).attr('id'); //get the id of the current checkbox $(this).closest('tr').find("td:eq(0) .checkNew").each(function() { // $("#tab_logic2 tbody").append($(this).text()); //alert('executed'); var sno = $(this).closest('tr').find("td:eq(1) input").val(); var iName = $(this).closest('tr').find("td:eq(2) input").val(); var iCode = $(this).closest('tr').find("td:eq(3) input").val(); var iDect = $(this).closest('tr').find("td:eq(4) input").val(); var iUom = $(this).closest('tr').find("td:eq(5) input").val(); var iQty = $(this).closest('tr').find("td:eq(6) input").val(); //set the custom attribute to the appending tr $("#tab_logic2 tbody").append('<tr data='+ id +'><td style="min-width: 80px;"><input type="text" id="sm_supp" value="' + sno + '" class="form-control newStyle1" name="sm_supp" readonly></td><td style="min-width: 140px;"><select class="form-control" id="iReqNo" name="iReqNo"><option>Choose Requitition no</option></select></td><td style="min-width: 140px;"><select class="form-control" id="inames" name="inames" value="' + iName + '"><option>Choose Item name</option></select></td><td style="min-width: 140px;"><select class="form-control" id="icode" name="icode" value="' + iCode + '"><option>Choose Item code</option></select></td><td style="min-width: 350px;"><input type="text" id="" value="' + iDect + '" class="form-control" name="sm_code" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iUom + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iQty + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><button type="button" class="dlRow del">x</button></a></td></tr>'); }); } else { //alert('else section'); //remove by maching the custom attribute with the check box id $("#tab_logic2 tbody [data="+$(this).attr('id')+"]").remove(); } }); function removeStaticVal(){ }

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- Table --> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="table-wrapper"> <div class="table-scroll"> <table class="table table-bordered" id="tab_logic"> <thead> <tr style="background-color: #680779; color: #fff;"> <th style="min-width: 80px;"> # </th> <th style="min-width: 80px;"> S.no </th> <th class="text-center"> Item Name </th> <th class="text-center"> Item Code </th> <th style="min-width: 350px;"> Description </th> <th style="min-width: 140px;"> UOM </th> <th style="min-width: 140px;"> Quantity </th> <th style="min-width: 140px !important;"> Action </th> </tr> </thead> <tbody id="tableBody"> <tr class="first" row-number="0" style="padding-bottom: 20%;"> <td style="min-width: 80px;"> <input type="checkbox" class="led-btn checkNew" name="selpoNO" id="selpoNO" value="PO" style="width: 13px;"> </td> <td style="min-width: 80px;"> <input type="number" value="1" id="serialNo" class="form-control" name="serialNo" placeholder="S.No" readonly/> </td> <td class="common_td"> <select class="form-control newRw3 clrRow sel_text" id="it_name1" name="it_name"> <option value="">Choose an items</option> <option value="1">100</option> <option value="2">200</option> <option value="3">300</option> <option value="4">400</option> <option value="5">500</option> </select> </td> <td class="common_td"> <select class="form-control" id="it_code1" name="it_code1"> <option value="">Choose item code</option> <option value="1">100</option> <option value="2">200</option> <option value="3">300</option> <option value="4">400</option> <option value="5">500</option> </select> </td> <td style="min-width: 350px;"> <input type="text" id="it_desc1" class="form-control" name="it_desc" placeholder="Item Description" /> </td> <td style="min-width: 140px;"> <input type="text" id="uomTable1" class="form-control newRw3 clrRow sel_text required" name="uomTable" placeholder="Enter Uom in kg" /> </td> <td style="min-width: 140px;"> <input type="text" id="qty1" name="qty" class="form-control" placeholder="Quantity" /> </td> <td style="min-width: 140px !important;"> <input type="button" class="dlRow" id="total1" value="Add" onclick="createTable();"> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <!-- Second table --> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="table-wrapper"> <div class="table-scroll"> <table class="table table-bordered" id="tab_logic2"> <thead> <tr style="background-color: #680779; color: #fff;"> <th style="min-width: 80px;"> S.no </th> <th style="min-width: 140px;"> Requistition No </th> <th style="min-width: 140px;"> Item Name </th> <th style="min-width: 140px;"> Item Code </th> <th style="min-width: 350px;"> Description </th> <th style="min-width: 140px;"> UOM </th> <th style="min-width: 140px;"> Quantity </th> <th style="min-width: 140px;"> Action </th> </tr> </thead> <tbody id="myNewtbody"> </tbody> </table> </div> </div> </div> </div> </div>