Question

I currently have a table that I am using to list a series of jobs in my RoR application like so:

<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>

What I would like to happen is that when the user hovers over the table row the font changes colour and when they click on the row they are sent to the Job URL that is currently being passed through by job.job_url method.

What I can’t work out is how to get this to integrat with Javascript?

Any advice and help people have on this would be much appreciated 🙂

Updated Content

#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>

This still doesn’t seem to be working – do you know where I am going wrong?

Answer 1

you can use css to change the font weight of the row using :hover selector. As for the link, you can add a data-url attribute and add some js which observes click events

# 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>

UPDATE: html using job.job_url

assuming you have the list of jobs on @jobs

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

UPDATE: use href instead of data-url (there might be some legacy issues when trying to use data-url)

The final working answer for this was:

$ ->
  $('tr[href]').click -> window.open 'http://' + $(this).attr('href');