link_toは各doループ内でブロックされません。

Question

私は、サブディジットタイトルである列を持つテーブルをレンダリングしようとしており、それぞれのサブディジットへのリンクを持っています。しかし、これはリンクを生成しません。私は特定のセルではなく、行全体をリンクにしたい。どうしたの？

<% @subreddits.each do |subreddit| %> 
     <tr> 
     <%= link_to subreddit do %> 
      <td><%= something else %></td> 
      <td><%= subreddit.title %></td> 
     <% end %> 
     </tr> 
    <% end %> 

Answer 1

あなたは<td>要素の周囲にリンクをラップしています。リンクの周りに<td>をラップします。

https://stackoverflow.com/a/6459846/2456549

---

：あなたは<td>全体のリンクを作成するために欠けている場合は

<% @subreddits.each do |subreddit| %> 
    <tr> 
    <td> 
     <%= link_to(subreddit.title, subreddit) %> 
    </td> 
    </tr> 
<% end %> 

、あなたは上記のコードプラスにこのようなものを使用する必要があります更新

質問を更新して<td>を追加したようです。 <tr>にリンクを張りたいと思っています。これを達成する最良の方法は、たぶんJavaScriptを使用することです。ソリューションについては、下のリンクを参照してください。 CSSを追加して、改良されたUXのために、<tr>に尖ったカーソルがあるようにします。

how to make a whole row in a table clickable as a link?

---

私は先に行って、ここに完全なソリューションを追加しました、jQueryのような依存関係を必要とせずに、付与された、それはES6で書かれているので、あなたがする必要がある場合varにconstを変更します。テストされていないことに注意してください。

# ERB 
<tr class="cursor-pointer" 
    data-behavior="clickable-row" 
    data-url="<%= subreddit_url(subreddit) %>"> 
    <td><%= something else %></td> 
    <td><%= subreddit.title %></td> 
</tr> 

---

# javascript 
const clickableRows = document.querySelectorAll('[data-behavior=clickable-row]'); 

clickableRows.addEventListener('click', event => { 
    window.location = event.currentTarget.dataset.url; 
}); 

---

# css 
.cursor-pointer { cursor: pointer; }