मुझे टेबल ए से टेबल बी तक पंक्तियों (एक समय में एक) को क्लोन करने की आवश्यकता है। कॉलम उत्पाद और मात्रा यथावत रहना चाहिए। फिर मुझे तालिका बी के तीसरे कॉलम (अंतिम मूल्य) को मूल्य के साथ, टेक्स्ट के रूप में और इनपुट के अंदर नहीं, कॉलम मात्रा और तालिका ए की सूची मूल्य के बीच गुणा से पूरा करने की आवश्यकता है। और अंत में अंतिम कॉलम के लिए, मेरे पास है जब मैंने मात्रा लिखी तो गलती की स्थिति में पंक्ति को हटाने के लिए हरे रंग की गाड़ी के बटम को एक नए के साथ बदलने के लिए।

अपने जावा कोड के साथ मैंने केवल सभी कॉलमों को क्लोन करने में कामयाबी हासिल की है और मैं बस इतना ही कर पाया हूं।

मैं आपके साथ प्रत्येक तालिका की छवियों और उपयोग किए गए HTML और जावास्क्रिप्ट कोड को साझा करता हूं।

टेबल ए

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

जावास्क्रिप्ट

var items = [];

    $(".cart").on("click", function() {
        var newTr = $(this).closest("tr").clone();
        items.push(newTr);
        newTr.appendTo( $("#selection") );
    });
0
2mcoffee 13 जून 2020, 02:45

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>
0
Swati 13 जून 2020, 08:48