时间戳

首页 > 解决方案 > Onchange event in dynamic table html

javascript - Onchange event in dynamic table html

问题描述

My requirement is I have a table having 4 columns in first cloumn can select item name, second is item rate, third is item qty last one is the total amount I want to get the item rate automaticaly in second column while changing item in first, and want tom get the total after focus out from qty field as the multiple opf qty and rate, i want a row adding buton to add rows and the onchange and onblur event should working on all rows, how can i do this ? my coode is 

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<table id="item_table">
<tr><th>SL No</th><th>Item Name</th><th>Rate</th><th>Qty</th><th>Total</th><th><button type="button" name="add" class="btn btn-success btn-sm add" >add</button></tr>
</table>




 <script>
$(document).ready(function(){
    $(document).on('click', '.add', function(){
      var html = '';
      html += '<tr>';
       html += '<td><input type="text" name="slno[]" /></td>';
       html += '<td><select name="item[]" id=item[] onchange="show_rate()"><option value="10">Item 1</option><option value="20">Item 2</option><option value="30">Item 3</option><option value="35">Item 4</option></td>';
      html += '<td><input type="text" name="rate[]" id="rate[]" /></td>';
      html += '<td><input type="text" name="qty[]" id="qty[]" onblur="sum_total()"/></td>';
      html += '<td><input type="text" name="total[]" id="total[]" /></td>';
     html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove" >Remove</button></td></tr>';
      $('#item_table').append(html);
     });

     $(document).on('click', '.remove', function(){
      $(this).closest('tr').remove();
     });
});
function show_rate(){
    var a=document.getElementsByName("item[]")[0].value;
    var b=document.getElementById("rate[]");
    b.value=a;
}
function capitalise(){
    var c=document.getElementsByName("rate[]")[0].value;
    var d=document.getElementsByName("qty[]")[0].value;
    var e=document.getElementById("total[]");
    e.value=+c * +d;
}
</script>

标签： javascriptdynamicdatatableonchangeonblur

解决方案

您必须使用选项标签中的值进行选择。每个选项都必须有一个唯一的 ID 或名称。然后，您可以调用选项的 value 属性并将其显示在第 2 列中。然后使用简单的数学运算符获取该值并将其乘以一个集合变量，您也可以使用上述方法从 select 中获取该变量。例 12

查看其他帖子以了解有关添加行的问题，那里有大量关于该主题的帖子，其中包含您需要的代码。

推荐阅读