Javascript 在rails中呈现页面后计算值

我正在尝试生成一个包含多列的报告。。呈现报告后，我允许用户输入一个值，该值将从已呈现的列中减去。。我有多行。。因此，我有如下尝试。我的浏览页面是

<script>
  function sum() {
  var txtFirstNumberValue = document.getElementById('txt1').value;
  var txtSecondNumberValue = document.getElementById('txt2').value;
  var result = parseFloat(txtFirstNumberValue) - parseFloat(txtSecondNumberValue);
   if(!isNaN(result))  {
   document.getElementById('txt3').value = result;  } }
</script>
<% @arr.each do |j| %>
<% @q =[] %>
<% t= 0 %>
<%= form_for ProductionReport.new ,:url=>{:controller=>"users",:action=>"rate_per_unit_report" } do |i| %>
<tr>
<td><%= j[0] %></td>
<td><%= j[1] %></td>
<td><%= j[2] %></td>
<% @q << j[3] %>
<td><%= i.text_field j[3], :value=>@q[t], :id=>"txt1", :onkeyup=>"sum()", :class=>"txt" %></td>
<td><%= i.text_field :selling_price, :id=>"txt2", :onkeyup=>"sum()", :class=>"txt" %></td>
<td><%= i.text_field :profit_loss, :id=>"txt3", :class=>"txt", :readonly =>true %></td>
<% end %>
<% t = t+1 %>
<% end %>
<td>total</td>
<td><%= @total %></td>
<td><%= @total1 %></td>
<td><%= @total2 %></td>

函数和（）{
var txtFirstNumberValue=document.getElementById（'txt1'）.value；
var txtSecondNumberValue=document.getElementById（'txt2'）.value；
var结果=parseFloat（txtFirstNumberValue）-parseFloat（txtSecondNumberValue）；
如果（！isNaN（结果））{
document.getElementById（'txt3'）。value=result；}
{:controller=>“users”，:action=>“rate_per__unit_report”}do|i|%>
“txt1”，：onkeyup=>“sum（）”，：class=>“txt”%>
“txt2”，：onkeyup=>“sum（）”，：class=>“txt”%>
“txt3”，：class=>“txt”，：readonly=>true%>
全部的

我的控制器是

def rate_per_unit_report
  @user=User.new
  @user = User.find(session[:user_id]).name
  @rpus = params[:production_report][:intial_date]
  @rpue = params[:production_report][:final_date]
  @production_report = ProductionReport.where(:date => @rpus..@rpue)
  @production = @production_report.select(:finished_goods_name).uniq
  @arr=[]
  g = 0
  @production.each do|i|
    @p = @production_report.pluck(:issue_id)
    @ll = @production_report.where(:finished_goods_name=>i.finished_goods_name).select(:total_no_of_items_produced).sum :total_no_of_items_produced
    @k = Issue.where(:id=>@p).pluck(:consolidated_cost)
    @rate = @k[g].to_f / @ll.to_f
    @r = @rate.round(2)
    @arr<<[i.finished_goods_name]+[@ll]+ [@k[g]] + [@r]
    g = g+1
  end
  @total=@arr.inject(0){|sum,x| sum + x[1].to_i }
  @total1=@arr.inject(0){|sum,y| sum + y[2].to_i }
  @total2=@arr.inject(0){|sum,z| sum + z[3].to_i }
end

def rate_per_unit_报告
@user=user.new
@user=user.find（会话[：user\u id]）.name
@rpus=参数[：生产报告][：初始日期]
@rpue=参数[：生产报告][：最终日期]
@生产报告=生产报告。其中（：date=>@rpus..@rpue）
@生产=@production\u report.select（：成品\u name）.uniq
@arr=[]
g=0
@生产.每件都要做| i|
@p=@production\u report.pullc（：issue\u id）
@ll=@production\u report.其中（：finished\u goods\u name=>i.finished\u goods\u name）。选择（：生产的项目总数）。总和：生产的项目总数
@k=问题。其中（：id=>@p）。采摘（：合并成本）
@rate=@k[g]。to_f/@ll.to_f
@r=@rate.round（2）
@arr创建表示每行的Javascript“对象”。注意第5列中的某些事件-
onchange
、
onkeyup
，或任何合适的事件。在事件侦听器中，从第4列和第5列中提取值并执行计算。这里的关键部分是将每一行表示为一个具有自己的函数集和事件处理程序的不同对象

更容易实现这一点的是将该行移动到一个partial中，并使用一个脚本标记为每一行初始化该对象

这里有一个示例，您可以使用它开始。我假设你有jQuery

RowEntry = function(element) {
  this.$el = element; // pass the row as a jQuery element
  this._init();
}

RowEntry.prototype._init = function() {
  var _this = this; // for accessing this in anonymous functions

  this.$el.find(".selling-price").on("keyup", function(event) {
    // do the math here or call functions that do
    // you can access 'this' here as '_this'
  });

  // you can setup other event listeners too if you want
}

因此，在您的部分中，您将有如下内容：

<script>
  var row = $(".row-entry") // you'll need to introduce something to reference the row
  new RowEntry(row);
</script>


var row=$（“.row entry”）//您需要引入一些东西来引用该行
新的行条目（行）；
创建表示每行的Javascript“对象”。注意第5列中的某些事件-
onchange
、
onkeyup
，或任何合适的事件。在事件侦听器中，从第4列和第5列中提取值并执行计算。这里的关键部分是将每一行表示为一个具有自己的函数集和事件处理程序的不同对象

更容易实现这一点的是将该行移动到一个partial中，并使用一个脚本标记为每一行初始化该对象

这里有一个示例，您可以使用它开始。我假设你有jQuery

RowEntry = function(element) {
  this.$el = element; // pass the row as a jQuery element
  this._init();
}

RowEntry.prototype._init = function() {
  var _this = this; // for accessing this in anonymous functions

  this.$el.find(".selling-price").on("keyup", function(event) {
    // do the math here or call functions that do
    // you can access 'this' here as '_this'
  });

  // you can setup other event listeners too if you want
}

因此，在您的部分中，您将有如下内容：

<script>
  var row = $(".row-entry") // you'll need to introduce something to reference the row
  new RowEntry(row);
</script>


var row=$（“.row entry”）//您需要引入一些东西来引用该行
新的行条目（行）；
因此，您需要根据用户输入的销售价格动态计算损益。是这样吗？是的，杰瑞。。谢谢你的快速回复。。我怎样才能做到这一点呢？因此，您需要根据用户输入的销售价格动态计算损益。是这样吗？是的，杰瑞。。谢谢你的快速回复。。我怎么能做到这一点呢？没有jquery我能做到这一点吗？就像我想循环javascript来动态完成这一过程一样。您可能最终会遇到混乱的代码。整个想法是让事情模块化，这样你就可以专注于那些模块中的具体细节。我能在没有jquery的情况下做到这一点吗，就像我想循环javascript来动态完成这一过程一样。您可能最终会遇到混乱的代码。整个想法是将事情模块化，以便您可以关注这些模块中的具体细节。