How to append table row to one table to another table using checkbox checked in javascript

Others 2022-04-20 03:17:14 views: 0
Joe :

I have two tables, 1st table having check-boxes, if I click that checkbox that row only append to 2nd table including values, if I uncheck that checkbox that row going to delete 2nd table..

here, my problem is 1st row is a static row its work for only static rows, I don't want to work with static row, I want to work for only dynamic rows.

Example: if I clicked checkbox that checked row only (closest) want to append second table.

I write some code to append rows to another table.

Here is my code.

Full code is here..

Sample here..

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

Mamun :

You can use delegation approach to attach the event along with :gt()(greater than) selector.

Change:

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

To:

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

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=7202&siteId=1
Recommended
TIOBE May list: Fortran “resurrected” into Top 10
GCC 14.1 released
Ranking
B. Little Girl and Game【1300 / 回文字符串 博弈论】
CIKERS Shane 20190613
"Javascript advanced programming" study notes - the constructor and prototype
beeline hiveserver2 start
springboot - Automatically backup mysql data every day
Data Storage Full Solution--Detailed Persistence Technology
Detailed Explanation of Spring Web MVC DispatcherServlet—Official Original
TCP / IP protocol layers structure and function
Command type literal pos: unknown； Fallback type literal pos: unknown] with root cause
Design of multifunctional curtain controller with indoor anti-theft alarm
Daily
More
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)

Code World

© 2018 codetd.com