第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為動態(tài)創(chuàng)建的輸入標簽分配和更新值 - jquery

為動態(tài)創(chuàng)建的輸入標簽分配和更新值 - jquery

PHP
函數(shù)式編程 2023-07-21 15:51:19
你好,我有最新的jquery,我有一個如下表,點擊添加按鈕我會附加一行輸入,我想計算按鍵上每個特定(產(chǎn)品)的總價(即數(shù)量*價格=總價),我面臨問題,因為我連續(xù)動態(tài)添加輸入,請建議任何解決方案。注意:想要使用 jquery/ javascript 實現(xiàn)解決方案 $(function () {       $("#btnAdd").bind("click", function () {           var div = $("<tr  />");           div.html(GetDynamicTextBox(""));           $("#TextBoxContainer").append(div);       });       $("body").on("click", ".remove", function () {           $(this).closest("tr").remove();       });   });   function GetDynamicTextBox(value) {       return '<td><input name = "particular[]" type="text" class="form-control" placeholder="Particulars" required /></td>'+ '<td><input name = "hsn[]" type="text" class="form-control" placeholder="HSN" required /></td>' + '<td><input name = "qty[]" type="number" class="form-control qty" placeholder="Quantity" required /></td>' + '<td><input name = "price[]" type="number" class="form-control price" placeholder="Price" required /></td>' + '<td><input name = "total[]" type="number" class="form-control total" placeholder="Total" required /></td>'  + '<td><button type="button" class="btn btn-sm btn-danger remove" data-toggle="tooltip" data-original-title="Remove materials items"><i class="fa fa-trash"></i></button></td>'   }<table class="table table-striped table-bordered" id="particulars_table">  <thead>     <tr>        <td>Particular</td>        <td>HSN</td>        <td>Qty</td>        <td>Rate</td>        <td>Action</td>     </tr>  </thead>  <tbody id="TextBoxContainer">  </tbody>  <tfoot>     <tr>        <th colspan="5">           <button id="btnAdd" type="button" class="btn btn-sm btn-success w-100" data-toggle="tooltip" data-original-title="Add more Materials"><i class="glyphicon glyphicon-plus-sign"></i>Add</button>        </th>     </tr>  </tfoot></table>
查看完整描述

1 回答

?
當年話下

TA貢獻1890條經(jīng)驗 獲得超9個贊

您可以使用jquery 的keyup方法change,即:每當數(shù)量的值發(fā)生變化時獲取該值,我們將使用它$(this)來獲取所需的值tr,我們將獲取價格的值并相乘qty,price并將值分配給total輸入。


演示代碼:


$(function() {

  $("#btnAdd").bind("click", function() {

    var div = $("<tr  />");

    div.html(GetDynamicTextBox(""));

    $("#TextBoxContainer").append(div);

  });

  $("body").on("click", ".remove", function() {

    $(this).closest("tr").remove();

  });

});


function GetDynamicTextBox(value) {

  return '<td><input name = "particular[]" type="text" class="form-control" placeholder="Particulars" required /></td>' + '<td><input name = "hsn[]" type="text" class="form-control" placeholder="HSN" required /></td>' + '<td><input name = "qty[]" type="number" class="form-control qty" placeholder="Quantity" required /></td>' + '<td><input name = "price[]" type="number" class="form-control price" placeholder="Price" required /></td>' + '<td><input name = "total[]" type="number" class="form-control total" placeholder="Total" required /></td>' + '<td><button type="button" class="btn btn-sm btn-danger remove" data-toggle="tooltip" data-original-title="Remove materials items"><i class="fa fa-trash"></i></button></td>'

}


 var rowtoatal = 0;

//on change of qty

$(document).on('change keyup ', '.qty ', function() {


//get qty value

  var qty = $(this).val();

  //getting closest tr

  var elem = $(this).closest("tr");

  //get  price value

  var price = elem.find("td input.price").val();

  //check if price is not null

  if (price !== null && price !== '') {

    rowtoatal = qty * price;

    console.log(qty + " *  " + price + " = " + rowtoatal)

    //adding total to sub_total

    elem.find("td input.total").val(rowtoatal)


  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<table class="table table-striped table-bordered" id="particulars_table">

  <thead>

    <tr>

      <td>Particular</td>

      <td>HSN</td>

      <td>Qty</td>

      <td>Rate</td>

      <td>Action</td>

    </tr>

  </thead>

  <tbody id="TextBoxContainer">

  </tbody>

  <tfoot>

    <tr>

      <th colspan="5">

        <button id="btnAdd" type="button" class="btn btn-sm btn-success w-100" data-toggle="tooltip" data-original-title="Add more Materials"><i class="glyphicon glyphicon-plus-sign"></i>Add</button>

      </th>

    </tr>

  </tfoot>

</table>


查看完整回答
反對 回復 2023-07-21
  • 1 回答
  • 0 關注
  • 134 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號