Question

我有jquery代码来计算表中的当前行（并进行一些算术运算）并将它们添加到列中。我在_form/_partial中使用了这个脚本，效果很好。但是，当我在show.html.erb中使用相同的脚本（再次设置同一个表）时，它不起作用。

这是我的_form

<table id="mytable">
    <th>RowNumber</th>
    <th>header2</th>
    <th>header3</th>
    <th>header4</th>  
        <%= f.nested_fields_for :partial do |f|
          render 'partial', f: f
        end -%> 
         <caption align = "bottom"><%= link_to_add_fields "Add Field", f, :manual_iops %></caption>
</table>

_partial.html.erb

<tr>
 <td> 
   <!-- Nothing Goes Here -->   
 </td>

 <td>
  <%= f.text_field :data1 %>
 </td>

 <td>
  <%= f.text_field :data2 %>
 </td>

  <td>
  <%= f.text_field :data3 %>
 </td>

</tr>

  <script>
   $('tr').each(function(){
     var index= $('#mytable').children('tr').index($(this))
     if(index == 0){
       var position= 5;
     }
     if(index == 1){
       var position = 10;
     }
     if(index == 2){
       var position = 15;
     }
     if(index == 3){
       var position = 20;
     }
     if(index > 3){
       var position = (index-1)*10
     }
     $(this).children('td').first().html(position);
  })
</script>

现在这就是我在节目中尝试的内容：

show.html.erb

<table id="mytable">
  <th>RowNumber</th>
  <th>header1</th>
  <th>header2</th>
  <th>header3</th>
     <% @data_sheet.partials.each do |c| %>
    <tr>
      <td></td>
      <td><%= c.data1 %></td>
      <td><%= c.data2 %></td>
      <td><%= c.data3 %></td>
    </tr>
  <script>
     $('tr').each(function(){
         var index= $('#mytable').children('tr').index($(this))
         if(index == 0){
               var position= 5;
         }
         if(index == 1){
               var position = 10;
         }
         if(index == 2){
               var position = 15;
         }
         if(index == 3){
               var position = 20;
         }
         if(index > 3){
               var position = (index-1)*10
         }
        $(this).children('td').first().html(position);
    })
  </script>
     <% end %>
</table>

以下是我的_form看起来如何的图片，您可以看到第一列的值为5, 10, 15, 20，因为partial.html.erb中的脚本会对行进行计数并执行一些+和*： enter image description here

这是我的show.html.erb，由于我的问题，它显示了一个空列（应该填充5,10,15,20）。我从我的部分运行相同的脚本：

enter image description here

那么在这种情况下我做错了什么？我看到的唯一不同的是我的循环以及我没有渲染部分的事实，但我认为没有理由这会影响我的javascript。我真的把头靠在墙上。

Answer 1

修改

哇，我没有意识到你正在循环那个剧本。你是故意这样做的吗？尝试将您的节目更改为：

<table id="mytable"> <th>RowNumber</th> <th>header1</th> <th>header2</th> <th>header3</th> <% @data_sheet.partials.each do |c| %> <tr> <td></td> <td><%= c.data1 %></td> <td><%= c.data2 %></td> <td><%= c.data3 %></td> </tr> <% end %> </table> <% content_for :scripts do %> <script> $(document).ready(function(){ $('tr').each(function(){ var index= $('#mytable').children('tr').index($(this)) if(index == 0){ var position= 5; } if(index == 1){ var position = 10; } if(index == 2){ var position = 15; } if(index == 3){ var position = 20; } if(index > 3){ var position = (index-1)*10 } $(this).children('td').first().html(position); }); }); </script> <% end %>

旧答案

主要问题可能是在文档准备好之前调用脚本，因此请尝试包装document.ready函数。另外，为了增加预防措施，请将其放在</body>标记之前。

尝试将<%= yield :scripts %>放在application.html.erb的</body>标记之前

现在你的部分投入：

<% content_for :scripts do %> <script> $(document).ready(function(){ $('tr').each(function(){ var index= $('#mytable').children('tr').index($(this)) if(index == 0){ var position= 5; } if(index == 1){ var position = 10; } if(index == 2){ var position = 15; } if(index == 3){ var position = 20; } if(index > 3){ var position = (index-1)*10 } $(this).children('td').first().html(position); }); }); </script> <% end %>

Answer 2

好的，如果你想用ruby做这件事很简单：

<table id="mytable">
  <th>RowNumber</th>
  <th>header1</th>
  <th>header2</th>
  <th>header3</th>

  <% @count = 5 %>  
  <% @data_sheet.partials.each do |c| %>
    <tr>
      <td><%= @count %></td>
      <td><%= c.data1 %></td>
      <td><%= c.data2 %></td>
      <td><%= c.data3 %></td>
    </tr>
  <% if @count >= 20 %>
    <% @count = @count + 10 %>
  <% else %> 
    <% @count = @count + 5 %>  
  <% end %>
</table>

您可以将if和语句重写为：

<% @count >= 20 ? (@count = @count + 10) : (@count = @count + 5) %>

jQuery函数部分工作但不显示

2 个答案: