使用jquery从foreach计算每一行表

Question

我在 Table 中有 foreach 循环（rails），我想从一个输入文本计算每一行。

我已经尝试创建 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>

文本字段的值将是字符串类型。目前尚不清楚用户是要输入整数还是浮点值，但由于我们正在使用价格，我认为它可能是。我使用parseFloat() 将输入的值转换为浮点数。

在.each()lookp 中，我可以使用$("select", element)style selection. Similar to$(element).find()` 只选择特定的类项。没有真正的区别，在我看来只是更少的代码。

从表格中读取价格并将其转换为另一个浮点值。计算所需值并将其放入该行的结果列中。我使用.toFixed() 来帮助四舍五入或显示浮点值（如果是货币）。

希望这会有所帮助。

Answer 2

以下几点会对您有所帮助，

1. 您的每一行表格都具有相同的类，这对您的目标来说是真正的问题。所以为表格的每一行定义不同的类。

2. class 在JS 中的搜索速度较慢，因此请使用id 代替它。

以下可以为每一行提供单独的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>

1. 稍后按照doc在您的js代码中使用$("[id^='itemrow']")和$("[id^='price']")

2. 补充：如果你的实例@userfile是集合对象，那么它应该是复数。使其适合@userfiles

3. 休息是你努力的一部分。

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 是指使用$(".result").text(share * tdval); 的情况，我建议他进行更改以访问同一行中所需的.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>

最后我认为没有必要循环价格，因为每一行只有一个价格。