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

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"  > </button>
      </td>
  </tr>
 
  <tr>
    <td>2</td>
    <td >Product 2</td>
    <td >$20</td>
     <td>
      <button type="button"  > </button>
      </td>
  </tr>

  <tr>
    <td>3</td>
    <td >Product 3</td>
    <td >$30</td>
     <td>
      <button type="button"  > </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>

CodePudding user response：

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" > </button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Product 2</td>
      <td>$20</td>
      <td>
        <button type="button" > </button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Product 3</td>
      <td>$30</td>
      <td>
        <button type="button" > </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></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.

CodePudding user response：

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.