Javascript or Jquery to clone or copy specific columns of one particular rows from one table to other table

Question

I need to clone rows (one at a time) from Table A to Table B. The columns Products and Quantity should remain as is. Then I need to complete the third column of table B (Final Price) with the value, as text and not inside an input, from the multiplication between the columns Quantity and List Price of table A. And finally for the last column, i have to replace the green cart buttom with a new one to delete the row in case of mistake when i writed the quantity.

With my java code I have only managed to clone all the columns and that's all I've been able to do.

I share with you the images of each table and the html and javascript code used.

Table A

<table class="table table-sm table-striped">
        <thead>
            <tr class="text-center">
                <th scope="col" style="width:50%">Product</th>
                <th scope="col" style="width:20%">List Price</th>
                <th scope="col" style="width:15%">Quantity</th>
                <th scope="col" style="width:15%">Add</th>
            </tr>
        </thead>
        <tbody id="searchbody">
            @foreach ($allProductPrice as $product)
            <tr data-id="" class="text-center">


                <td scope="col" class="align-middle">{{$product->Product}}</td>
                <td scope="col" class="align-middle">{{$product->Price}}</td>
                <td scope="col" class="align-middle">
                    <input type="number" class="form-control input-sm" min="0" value="0" name="quantity">
                </td>
                <td scope="col" class="align-middle">
                    <button type="button" class="btn btn-success btn-sm cart"><i class="fas fa-shopping-cart"></i></button>
                </td>

            </tr>
            @endforeach
        </tbody>
    </table>

Table B

<table class="table table-sm table-striped" id="selection">
        <thead>
            <tr class="text-center">
                <th scope="col" style="width:50%">Product</th>
                <th scope="col" style="width:15%">Quantity</th>
                <th scope="col" style="width:20%">Final Price</th>
                <th scope="col" style="width:15%">Remove</th>
            </tr>
        </thead>
        <tbody>
            <tr data-id="" class="text-center">

                <td scope="col" class="align-middle"></td>
                <td scope="col" class="align-middle"></td>
                <td scope="col" class="align-middle"></td>
                <td scope="col" class="align-middle">
                    <button type="button" id="delete" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                </td>

            </tr>
        </tbody>
    </table>

Javascript

var items = [];

    $(".cart").on("click", function() {
        var newTr = $(this).closest("tr").clone();
        items.push(newTr);
        newTr.appendTo( $("#selection") );
    });

Answer 1

You can use .text() or val() to get value of quantity and price from your cloned row then we can update those value using td:eq("columnno") and to replace cart button with delete button,use .replaceWith() method.

Demo Code :

 $(".cart").on("click", function() { var newTr = $(this).closest("tr").clone(); //getting qty var name = newTr.find("td.name").text(); var exist=false; var qty = newTr.find("td input").val(); //getting price var price = newTr.find("td.price").text(); //add qty to column 1 newTr.find('td:eq(1)').text(qty); //add final price to column 2 newTr.find('td:eq(2)').text(qty * price); //replace cart buton with delete newTr.find("td:eq(3)").replaceWith('<button type="button" id="delete" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>'); //append to table newTr.appendTo($("#selection")); });

 <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <.-- jQuery library --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery:min.js"></script> <.-- Latest compiled JavaScript --> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4:1/js/bootstrap:min:js"></script> <table class="table table-sm table-striped"> <thead> <tr class="text-center"> <th scope="col" style="width:50%">Product</th> <th scope="col" style="width:20%">List Price</th> <th scope="col" style="width:15%">Quantity</th> <th scope="col" style="width:15%">Add</th> </tr> </thead> <tbody id="searchbody"> <tr data-id="" class="text-center"> <:--added class name and price--> <td scope="col" class="align-middle name" value="Abc">Abc</td> <td scope="col" class="align-middle price">15</td> <td scope="col" class="align-middle"> <input type="number" class="form-control input-sm" min="0" value="0" name="quantity"> </td> <td scope="col" class="align-middle"> <button type="button" class="btn btn-success btn-sm cart"><i class="fa fa-shopping-cart"></i></button> </td> </tr> <tr data-id="" class="text-center"> <td scope="col" class="align-middle name" value="Abcd">Abcd</td> <td scope="col" class="align-middle price">150</td> <td scope="col" class="align-middle"> <input type="number" class="form-control input-sm" min="0" value="0" name="quantity"> </td> <td scope="col" class="align-middle"> <button type="button" class="btn btn-success btn-sm cart"><i class="fa fa-shopping-cart"></i></button> </td> </tr> </tbody> </table> <table class="table table-sm table-striped" id="selection"> <thead> <tr class="text-center"> <th scope="col" style="width:50%">Product</th> <th scope="col" style="width:15%">Quantity</th> <th scope="col" style="width:20%">Final Price</th> <th scope="col" style="width:15%">Remove</th> </tr> </thead> <tbody> </tbody> </table>