0

我目前有一个表格，用于列出我的 RoR 应用程序中的一系列作业，如下所示：

<section id="table-wrapper">
  <table id="jobs">
    <thead>
      <tr>
        <td>position</td>
        <td>company</td>
        <td>location</td>
      </tr>
    </thead>
    <tbody>
      <% @jobs.each do |job| %>
        <%= link_to url_with_protocol(job.job_url), :target => '_blank' do %>
          <tr>
            <td><strong><%= job.title %></strong></td>
            <td><%= job.company %></td> 
            <td><%= job.city %>, <%= job.country %></td>
          </tr>
        <% end %>           
      <% end %>
    </tbody>
  </table>
</section>

我想要发生的是，当用户将鼠标悬停在表格行上时，字体会改变颜色，当他们点击行时，它们会被发送到 job.job_url 方法当前正在传递的 Job URL。

我无法解决的是如何让它与 Javascript 集成？

人们对此提出的任何建议和帮助将不胜感激:)

更新内容

#JS
$('table tbody tr').click(function(){
  <%= link_to job.job_url, :target => '_blank' do %>;
})


#HTML
<section id="table-wrapper">
  <table id="jobs">
    <thead>
      <tr>
        <td>position</td>
        <td>company</td>
        <td>location</td>
      </tr>
    </thead>
    <tbody>
      <% @jobs.each do |job| %>
        <tr>
          <td><%= job.title %></td>
          <td><%= job.company %></td>   
          <td><%= job.city %>, <%= job.country %></td>
        </tr>       
      <% end %>
    </tbody>
  </table>
</section>

这似乎仍然不起作用 - 你知道我哪里出错了吗？

4

1 回答 1

1

您可以使用 css 使用选择器更改行的字体粗细:hover。至于链接，您可以添加一个data-url属性并添加一些观察点击事件的js

# css
table tr:hover { font-size: 100px; }

# js
$('table tr').click(function() { window.location = $(this).data('url') })

# html
<table>
  <tr data-url='http://google.com'>
    <td>...</td>
  </tr>
</table>

更新：使用 job.job_url 的 html

假设你有工作清单@jobs

<table>
  <% @jobs.each do |job| %>
    <tr data-url='<%= job.job_url %>'>
      <td>...</td>
    </tr>
  <% end %>
</table>

更新：使用href代替data-url（尝试使用 data-url 时可能存在一些遗留问题）

对此的最终工作答案是：

$ ->
  $('tr[href]').click -> window.open 'http://' + $(this).attr('href');
于 2013-02-05T13:05:40.317 回答