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メソッドによって渡されているジョブ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 に答える