Javascript 或 Jquery 將一個特定行的特定列從一個表克隆或復制到另一個表

Question

我需要將行（一次一個）從表 A 克隆到表 B。產品和數量列應保持原樣。 然后我需要完成表 B 的第三列（最終價格）的值，作為文本，而不是在輸入中，從表 A 的數量和標價列之間的乘法。最后對於最后一列，我有用新的替換綠色購物車按鈕以刪除行，以防我在寫數量時出錯。

使用我的 java 代碼，我只設法克隆了所有列，這就是我所能做的。

我與您分享每張桌子的圖像以及使用的 html 和 javascript 代碼。

表 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>

表 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

您可以使用.text()或val()從克隆的行中獲取數量和價格的值，然后我們可以使用td:eq("columnno")更新這些值並將購物車按鈕替換為刪除按鈕，使用.replaceWith()方法。

演示代碼：

 $(".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>