Question

我在Table中有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>

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

在.each()外观中，我可以使用$（“ select”，element）style selection. Similar to $（element）.find（）`仅选择特定的类项目。没有真正的区别，在我看来只是更少的代码。

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

希望这会有所帮助。

Answer 2

您尚未指定您要使用$ .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>

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

Answer 3

以下几点将为您提供帮助，

您的表的每一行都具有相同的类，这对于您的目标是真正的问题。因此，为表的每一行定义不同的类。
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>

稍后根据doc

$("[id^='itemrow']")

$("[id^='price']")

其他：如果您的实例@userfile是集合对象，则它应该是复数。将其设置为@userfiles
休息是您努力的一部分。

Answer 4

在html中为“ jquery / min.js”提供路径，然后执行键入事件 // 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);
  });     
 });
});

使用jQuery从foreach计算每个行表

4 个答案: