Question 36261 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I need to copy selected row from one table to another html table using JQuery or Javascript

I have data in source table and i want to copy and append row to destination table on button click of specific row. There is an h1 where I want to display column total of price column of destination table. Also I need button on destination table from which I can remove the selected row from that table.

    <table id="source_table" >
 <thead>
  <tr>
     <th>ID</th>
     <th>Name</th>
     <th>Price</th>
     <th>Action Copy</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>1</td>
    <td >Product 1</td>
    <td >$10</td>
     <td>
      <button type="button" class="copy-row" >+</button>
      </td>
  </tr>
 
  <tr>
    <td>2</td>
    <td >Product 2</td>
    <td >$20</td>
     <td>
      <button type="button" class="copy-row" >+</button>
      </td>
  </tr>

  <tr>
    <td>3</td>
    <td >Product 3</td>
    <td >$30</td>
     <td>
      <button type="button" class="copy-row" >+</button>
      </td>
  </tr>

 </tbody>
</table>


<table id="dest_table" >
 <thead>
  <tr>
     <th>ID</th>
     <th>Name</th>
     <th>Price</th>
     <th>Action Delete</th>
  </tr>
 </thead>
 <tbody>
 

 </tbody>
</table>


<div> Total Price <h1> <!-- I want to show price column(dest_table) total here ->  </h1> </div>
Tags:

2

Answers


  1. 0

    Do you want something like this:

     $(document).ready(function(){        
        $(".copy-row").click(function(){
            var currentRow=$(this).closest("tr"); 
            var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
            var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
            var col3=currentRow.find("td:eq(2)").text(); // get current row 3rd TD
            var col4=currentRow.find("td:eq(3)").text(); // get current row 4th TD
            var markup = "<tr><td>" + col1 + "</td><td>" + col2 + "</td><td>" + col3 + "</td><td>" + col4 + "</td></tr>";
            
            $("#dest_table tbody").append(markup);

            // sum of price
            var sum = 0;
            $('#dest_table tbody tr').each(function() {
                var price = $(this).find('td:eq(2)').text();
                price = price.replace('$', '');
                sum += parseInt(price);
            });
            $('#total').text('$' + sum);
        });
    });

    But I highly recommend you use some framework like React, Vue or Svelte. Your life will be easier.

    Login or Signup to reply.
  2. 0

    Consider the following example.

    $(function() {
  function calcTotal(t) {
    var rows = $("tbody tr", t);
    var total = 0.00;
    var val;
    rows.each(function(i, r) {
      val = $("td:eq(2)", r).text().substr(1);
      total += parseFloat(val);
    });
    $(".total").html("$" + total);
  }
  $(".copy-row").click(function(e) {
    var src = $(this).closest("tr");
    var dst = $("#dest_table tbody");
    src.clone().appendTo(dst);
    $("#dest_table tbody tr:last td:eq(3) button").toggleClass("copy-row del-row").html("X");
    calcTotal($("#dest_table"));
  });
  $("#dest_table tbody").on("click", ".del-row", function(e) {
    if (confirm("Are you sure you want to remove this row?")) {
      $(this).closest("tr").remove();
    }
    calcTotal($("#dest_table"));
  })
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="source_table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
      <th>Action Copy</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Product 1</td>
      <td>$10</td>
      <td>
        <button type="button" class="copy-row">+</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Product 2</td>
      <td>$20</td>
      <td>
        <button type="button" class="copy-row">+</button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Product 3</td>
      <td>$30</td>
      <td>
        <button type="button" class="copy-row">+</button>
      </td>
    </tr>
  </tbody>
</table>
<table id="dest_table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
      <th>Action Delete</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<div class="total"> Total Price
  <h1></h1>
</div>

    This makes use of a lot of elements, yet at it’s core, it does clone the row, and appends the clone to the destination.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search