Рассчитайте каждую таблицу строк из foreach, используя jquery

Question

У меня есть цикл foreach (рельсы) в таблице, который я хочу рассчитать для каждой строки из одного входного текста.

Я уже пытался создать jquery, но он вычисляет только первую строку таблицы.

Ожидаемый результат для этого, он должен видеть каждую строку, рассчитанную из keyup ввода текста

 <input type = "text" class = "share_amount" id = "alldata" >
 <table class="table table-borderless table-striped table-earning">
 <thead>
 <tr>
    <th>User</th>
    <th>Amount</th>
    <th>Share</th>
    <th>Result</th>
 </tr>
</thead> 
<tbody>                                   
<% @userfile.each do |info|%>
<tr class = "itemrow">
  <td><%= info.name %></td>
  <td class = "price1"><%= info.amount %></td>
  <td><%= info.share %></td>
  <td class = "result"></td>
</tr>
<%end%>

  <script>
        $(document).ready(function(){
            $("input#alldata").keyup(function() {
                var share = this.value;
                $('tr.itemrow').each(function () {
                   $(this).find('.price1').each(function(){
                      var tdval = $(this).text();
                      $(".result").text(share * tdval);
                 });     
              });
            });
          });
    </script>

Answer 1

При использовании .each() следите за тем, чтобы не делать это более. Кроме того, для этого использования полезно передать индекс и элемент или использовать this.

Рассмотрим следующий пример:

$(function() {
  $("input#alldata").keyup(function(e) {
    var share = parseFloat($(this).val());
    $('tr.itemrow').each(function(i, el) {
      var val = share * parseFloat($(".price1", el).html());
      $(".result", el).html(val.toFixed(2));
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="share_amount" id="alldata">
<table class="table table-borderless table-striped table-earning">
  <thead>
    <tr>
      <th>User</th>
      <th>Amount</th>
      <th>Share</th>
      <th>Result</th>
    </tr>
  </thead>
  <tbody>
    <tr class="itemrow">
      <td>
        Name 1
      </td>
      <td class="price1">
        1.50
      </td>
      <td>
        Share 1
      </td>
      <td class="result"></td>
    </tr>
    <tr class="itemrow">
      <td>
        Name 2
      </td>
      <td class="price1">
        2.75
      </td>
      <td>
        Share 2
      </td>
      <td class="result"></td>
    </tr>
    <tr class="itemrow">
      <td>
        Name 3
      </td>
      <td class="price1">
        4.00
      </td>
      <td>
        Share 3
      </td>
      <td class="result"></td>
    </tr>
  </tbody>
</table>

Значением текстового поля будет тип String. Было неясно, собирался ли пользователь вводить целое число или значение с плавающей запятой, но, поскольку мы работаем с ценами, я подумал, что это может быть либо. Я использовал parseFloat() для преобразования значения, введенного в число с плавающей точкой.

В просмотре .each() я могу выбрать только элементы определенного класса, используя $ ("select", element) style selection. Similar to $ (element) .find () `. На мой взгляд, разницы нет, просто меньше кода.

Считайте цену из таблицы и конвертируйте ее в другое значение Float. Вычислите желаемое значение и поместите его в столбец результата для этой строки. Я использую .toFixed(), чтобы помочь округлить или отобразить значение с плавающей запятой (если валюта).

Надеюсь, это поможет.

Answer 2

Следующие пункты помогут вам,

1. У каждой строки таблицы один и тот же класс, что является реальной проблемой для вашей цели. Поэтому определите разные классы для каждой строки таблицы.

2. class - медленный селектор для поиска в JS, поэтому вместо него используйте id.

Ниже приведен отдельный индекс для каждой строки.

<% @userfile.each_with_index do |info, i|%>
  <tr id = "itemrow-#{i+1}">
    <td><%= info.name %></td>
    <td id = "price-#{i+1}"><%= info.amount %></td>

3. Используйте $("[id^='itemrow']") & $("[id^='price']") в своем коде js позже как doc

4. Дополнительно: если ваш экземпляр @userfile является объектом коллекции, то он должен быть во множественном числе. Сделайте это как @userfiles

5. Отдых - ваша часть усилий.

Answer 3

В html укажите путь для "jquery / min.js", затем выполните события keyup // HTML

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>    
<input type = "text" class = "share_amount" id = "alldata" >
<table class="table table-borderless table-striped table-earning">
<thead>
 <tr>
  <th>User</th>
  <th>Amount</th>
  <th>Share</th>
  <th>Result</th>
 </tr>
</thead> 
<tbody>                                   
  <tr class="itemrow">
    <td>ABC</td>
    <td class="price1">10000</td>
    <td>Share1</td>
    <td class="result"></td>
  </tr>
  <tr class="itemrow">
    <td>ABC2</td>
    <td class="price1">20000</td>
    <td>Share2</td>
    <td class="result"></td>
  </tr>
</tbody>

//jquery

$("#alldata").keyup(function() {
var share = this.value;
 $('tr.itemrow').each(function () {
  $(this).find('.price1').each(function(){
   var tdval = $(this).text();
   $(".result").text(share * tdval);
  });     
 });
});

Answer 4

Вы не указали, какой .result Вы имеете в виду, используя $ 1002 *. Я предлагаю ему внести следующие изменения, чтобы получить доступ к нужному .result в той же строке:

<script>
//....
     $('tr.itemrow').each(function () {

           $(this).find('.price1').each(function(){
               var tdval = parseInt($(this).text()); //use parseInt to convert it to a number
           });

          $(this).find(".result").text(share * tdval);
    })
//...
</script>

Наконец, я думаю, что нет необходимости перебирать цену, потому что в каждой строке есть только одна цена.