Событие Onchange в динамической таблице html - PullRequest
Новая
       66

Событие Onchange в динамической таблице html

0 голосов
/ 29 августа 2018

Мое требование - у меня есть таблица с 4 столбцами. в первом клумне можно выбрать название предмета, во втором - скорость предмета, в третьем - количество товара, последний - общая сумма Я хочу получить частоту предметов автоматически во втором столбце при изменении предмета в первом, и хочу получить общее количество после фокуса из поля кол-во в виде множественного числа и скорости, я хочу, чтобы добавление строк добавляло строки, а события onchange и onblur должны работать на всех строках, Как я могу это сделать ? мой кул 

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

1 Ответ

0 голосов
/ 29 августа 2018

Вы должны сделать свой выбор со значениями в тегах параметров. Каждый параметр должен иметь уникальный идентификатор или имя. Затем вы можете вызвать атрибут value опции и отобразить его в столбце 2. Затем используйте простые математические операторы, чтобы взять значение и умножить его на переменную набора, которую вы также можете получить из выбора, используя упомянутый выше метод. Пример 12

Посмотрите на другие посты вопросы о добавлении строк, там есть множество постов на эту тему с именно тем кодом, который вам нужен.

...