Copying rows from one table to another with jQuery

Question

Copying rows from one table to another with jQuery

Navigation

#1 by (3 votes)

1

I have the following tables:

<html>
    <table class="table table-hover" id="tb1">
        <thead>
            <tr>
                <th class="a-center" width="60">Codigo</th>
                <th class="a-left">Descrição</th>
                <th class="a-center" width="40">Qtd.<br />Total</th>
                <th class="a-center" width="25">UM</th>
                <th class="a-center" width="25">Enviar</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>00001</td>
                <td>Produto 1</td>
                <td>5</td>
                <td>UN</td> 
                <td><input type="checkbox"></td>
            </tr>
        </tbody>
    </table>  
    <br><br>
    <table class="table table-hover" id="tb2">
        <thead>
            <tr>
                <th class="a-center" width="60">Codigo</th>
                <th class="a-left">Descrição</th>
                <th class="a-center" width="40">Qtd.</th>
                <th class="a-center" width="200">Observação</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table> 
</html>

How do I copy the Code | Description | Qtd ) fields from the tb1 table to the table tb2 as soon as the checkbox in the "Send" column is marked in the tb1 table? I also need an input to fill in an observation in the tb2 table.

I tried using the following jQuery code, but it only copies the values and puts them side by side:

jQuery("#tb1 input:checkbox").click(function(){
 var html = '';
    if (jQuery(this).is(":checked")){
        jQuery(this).parent('td').prev('td').prev('td').prev('td').prev('td').clone().appendTo("#tb2");
        jQuery(this).parent('td').prev('td').prev('td').prev('td').clone().appendTo("#tb2");
        jQuery(this).parent('td').prev('td').prev('td').clone().appendTo("#tb2");
        //alert(html);
    } else {
      var index = jQuery(this).closest("tr").attr("data-index");
      var findRow = jQuery("#tb2 tr[data-index='" + index + "']");
      findRow.remove();
    }
});

Summarizing what the code needs to do:

1-Clone the lines that had the "Send" checkbox checked. Home 2-The UM field should not be sent to the table 2 . Home 3-Must be generated in table 2 , an input "Note" for each cloned row. 4-Once the checkbox is unchecked in table 1 the corresponding line in table 2 should be removed.

jquery

asked by anonymous 31.07.2017 / 14:51

1 answer

Prevent typing input letters with angular [duplicate] Click event does not work in custom control

score 3 · Accepted Answer

Each line item in this example should contain an ID, in which case I put a data-index and this number will serve to include and exclude the table 2 item as checkbox is selected or no.

function cloneOrRemove(obj, idx) {

  if (jQuery(obj).prop('checked')) {
    var tr = jQuery("table#tb1 tbody")
      .find('[data-index="' + idx + '"]');
    jQuery("table#tb2 tbody")
      .append(jQuery(tr[0]).clone());

    var tr = jQuery("table#tb2 tbody")
      .find('[data-index="' + idx + '"]');

    var td = '<td><input type="text"></td>';
    jQuery(jQuery(tr[0]).find('td')[3]).remove();
    jQuery(jQuery(tr[0]).find('td')[3]).text('');
    jQuery(jQuery(tr[0]).find('td')[3]).append(td);


  } else {
    var tr = jQuery("table#tb2 tbody")
      .find('[data-index="' + idx + '"]');
    jQuery(tr[0]).remove()
  }
}

jQuery(document).ready(function() {

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table class="table table-hover" id="tb1">
  <thead>
    <tr>
      <th class="a-center" width="60">Codigo</th>
      <th class="a-left">Descrição</th>
      <th class="a-center" width="40">Qtd.<br />Total</th>
      <th class="a-center" width="25">UM</th>
      <th class="a-center" width="25">Enviar</th>
    </tr>
  </thead>
  <tbody>
    <tr data-index="1">
      <td>00001</td>
      <td>Produto 1</td>
      <td>5</td>
      <td>UN</td>
      <td><input type="checkbox" onclick="cloneOrRemove(this,'1')"></td>
    </tr>
    <tr data-index="2">
      <td>00002</td>
      <td>Produto 2</td>
      <td>60</td>
      <td>UN</td>
      <td><input type="checkbox" onclick="cloneOrRemove(this,'2')"></td>
    </tr>
  </tbody>
</table>

<table class="table table-hover" id="tb2">
  <thead>
    <tr>
      <th class="a-center" width="60">Codigo</th>
      <th class="a-left">Descrição</th>
      <th class="a-center" width="40">Qtd.</th>
      <th class="a-center" width="200">Observação</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>