Copy lines from one table to another with jQuery

Asked

Viewed 914 times

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 fields (Code|Description|Qtd) table tb1 to the table tb2 as soon as the checkbox of the "Send" column is marked in the table tb1? I also need that on the table tb2 an input is generated to fill in an observation.

I tried using the following jQuery code, but it just copies the values and puts 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 checkbox "Send" marked.
2-The field ONE should not be sent to table 2.
3-It must be generated in the table 2, an "Observation" input for each cloned line.
4-Once the checkbox is unchecked on table 1 the corresponding line in table 2 must be removed.

jquery

  • I made an answer, but, I was in doubt on some points, it is to clone the line or remove and add on the other?

1 answer

3


Each line item in this example should contain an identification, in case I put a data-index and this number will be used to include and exclude the table 2 as per the checkbox is selected or not.

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>
<script src="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>

  • Virgilio Novic, if we click countless times on the send button, it will replicate countless times the selected content. And how does the code work? For future access of other users an explanation falls very well.

  • @Bsalvo am awaiting the immediate contact of the 3 degree boy who asked the question, the question is vague, and still do not finish the whole parade!

  • Oops! So let’s wait this contact kkkk, sorry for the premature comment.

  • No problem @Bsalvo

  • In this case it would only be to clone, only what I need is for it to be cloned when the line checkbox is checked, and not via a send button. Another thing I forgot to mention is that when the checkbox is unchecked on tb1 the line corresponds in tb2 has to be deleted. There is also the observation field question that should be generated in the table tb2 which in this case will be an input.

  • So @Msantos writes all this in your question and let me know here so I can change! Ok!

  • Okay, I performed the question edit.

  • @Msantos ready I made an example ...

  • 1

    @Thank you, that’s just what I needed.

Show 4 more comments

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.