複数の要素が入ったテーブルの行全体をリンクにし、詳細ページに遷移するようにしたい！(Ruby on Rails6)

Question

##解決したいこと
複数のカラム（ｔｄ）があるテーブルの行（ｔｒ）全体をリンクにしてクリック可能にしたいと思い実装しています。
テーブルをindex.html.erbに記述しており、クリックすることでそのデータの詳細ページであるshow.html.erbに遷移したいと考えています。

##前提
・tdのうちの一つにlink_toを記述して実装した場合は遷移することが可能でしたので、パスの指定は問題ない。（パスの指定にはPrefixパスを用いています。）
・試行錯誤の一つとしてJavaScriptを用いていますが、JSファイルは正常に読み込めています。

##試したこと
1、link_to do を使ってtrを囲ってしまえばいいのでは？と思い実装しましたがうまくいかず。調べたところ今回のようなテーブルデータの場合は使用できないようでした。

2、jQueryで複数の要素が入った行全体をリンク扱いとすることができると知り、実装してみたところリンク扱いとすることは成功はしました。ですが、Prefixパスでのリンク先の指定方法がわからず、遷移することができません。試しにリンク先を記述する場所に、"<% character_move_path(id:move)%>"や"character_move_path(id:move)"と記述して試してみましたがうまくいかずでした。正直書き方が間違っているのか、そもそもPrefixでの指定はできないのすらわからない状態です。

<% @moves.each do |move| %>
 　<tr class="moves-contents" data-href="Prifxパスの場合、ここのリンク先の指定ができない">
    <td><%= move.moves_name %></td>
    <td><%= move.command %></td>
    <td><%= move.hitbox %></td>
    <td><%= move.startup %></td>
    <td><%= move.block %></td>
　　　</tr>
<% end %>

//jQuery.js（もしくは対象HTMLの<script>タグ内に記述）
$(function($) {
  //moves-contentsクラスの行をマウスオーバーするとカーソルをポインターに変更
     $(".moves-contents").css("cursor","pointer").click(function() {
  //クリックで「data-href」のリンク先へ遷移
         window.href = $(this).data("href");
     });
 });

##最後に
この他、解決の際に必要なコード等がございましたら、ご指定いただきたく存じます。
また、jQuery以外によい実装方法がございましたら、解決済み後でも構いませんので、ご教授いただけると嬉しいです！励みになります！！
何卒よろしくお願いいたします。

Answer 1

jsの中に <% character_move_path(id:move)%> などのrubyの式を入れても反映しません。file名の最後に .erb とつければ処理してくれますが、それはサーバー起動時に行われて終わりですので、今回の様なページ毎に変わるような情報には対応できないです。

<tr> に idをつけて、on click でそのidを手に入れ、それをつかって urlを組み立てる ということを行うのかな、と思います。

全てのTDにlinkを貼る という手もありそうな

Comments

[hikaru-udon]

winterさん、お世話になっております。今回もお力添え感謝致します????
なるほど、js、jQueryにrubyの記述式は書けず、今回のようにrubyの記法でリンクとして書くことはできないということですか。大変勉強になります。

代案の件ですが、jsにて「<tr> に idをつけて、on click でそのidを手に入れ」までは分かるのですが、それを使ってURLを組み立てるというのはどうするのでしょうか？お手数ですがぜひ具体的に教えていただきたく存じます。

実は全てのtdをlink_toにするという案は自分も考えていました????ですが、tdセル内の要素（link_toの文字）をレスポンシブ対応しながらセルいっぱいに広げるうまいやり方がわからず断念してしましました。もしこちらのやり方で良い方法をご存知でしたらご教授いただけると幸いです！

毎度質問に重ねて質問が多いですが真摯に向き合っていただき本当にありがとうございます！

[winterboum]

1) どういうURLにしたいのですか？
2) link_to　の文字って、もともとlink_toで無いときに表示していた文字列では無いのですか？ それと同じCSSでいけない？

[hikaru-udon]

1）理解力が足りておらず、そもそもどういったURLにできるのかがわかりません。返答として正しいかはわかりませんが、詳細ページであるshow.html.erbへ遷移するようにしたく、「/characters/1/moves/1」のように各行データの詳細に飛べるように指定したいです。もし見当はずれな返答であれば遠慮なくご指摘ください。

2）それがいけないんです???? 前提としましてセル内の文字を上下中央よせにしたく、link_toにしない場合のtdはdisplay:table-cell;が適用されているのでvertical-alignで上下中央よせができています。しかし、link_toを入れた場合にはllink_toがインライン要素なので要素自体の上下中央寄せは適用されるのですがtdいっぱいに要素を広げることができず、td全体をクリック判定にすることができないんです???? 試しにlink_toをblock要素に変えて実装してみましたが、tdいっぱいには広がるものの、今度は文字の上下中央揃えがうまくできないようになってしまい、どうしたものかと悩んでおります。????

[winterboum]

まず oakbouさんの回答でうまく行くか見てください。
それがうまく行かなかった前提で。
詳細を表示するのが Move なら、/moves/1 で良いですね。routesに追加が必要かもしれませんが。
id として "moves_1" を与えて、それを "/moves/1" に変換すれば良いのでは

[hikaru-udon]

oakbowさんのご指摘にそって実装したところ、無事に目的の場所に遷移することができました！
今回もたくさんのアドバイスをいただきありがとうございます。winterさんがご提案いただいたおかげで「td全部link_to実装」のテキストの位置問題も根気強く模索し、解決することができました????
今回でJavascriptについてもっと知り、活用できるようになりたいと感じましたので、腰を据えて勉強しようと思います。その際に疑問が出ましたら、その時再びよろしくお願いいたします????‍♂️????

Answer 2

正しいパスがこちらではわからないのであくまで書き方だけですが、

　<tr class="moves-contents" data-href="<%= character_move_path(id:move)%>">

でうまくいかないのでしょうか？
<%= というふうに表示に関しては =　を書く必要があるのですが、ご提示の例では <% と書かれているので、単に typo に近いミスをしているだけのような気がしました。

※　正しい URL の表記は character_move_path(move) か、 character_move_path(id: move.id) のような気はします。ご自身で確かめてください。

• <% ~ %> ブロック...ブロックで囲まれた中身を Ruby と判断して処理を実行する。実行するだけで結果を出力しない。

• <%= ~ %> ブロック...ブロックで囲まれた中身を Ruby　と判断して処理を実行する。実行した後の結果をHTML として出力する。

という違いがあります。 = を忘れるミスはよくやります。

Comments

[hikaru-udon]

oakbowさん、ご回答いただきありがとうございます！
ご丁寧に解説いただき、誠に勉強になります！確かに、＝の記述を忘れていました????
ですが、修正しても変化はありませんでした。。。

別途パスの記述方法についてもご指摘ありがとうございます。引数のことでで気になったのですが、今回はcharacterとmoveモデルをネストしているので、記述いただいた方の後者が正しいかと思います。ただ、(id: move.id)でも(id: move)でもどちらでも機能するのですが、その理屈がいまいちわかっていません。「ネストした場合、パスの中にidが複数入る時にはPrefixパスの引数に親と子の両方（孫まであれば孫も）のidを順番に指定する必要がある」というルールは把握しているのですが、省略した場合になぜこういった記述になるのかが理解できていません。よろしければこちらもご教授いただけないでしょうか。ちなみに質問にある(id: 変数)の記法は偶然発見しました。笑

[oakbow]

あら、動きませんでしたか。
コード見る限り動きそうなJSですが、$(this).data("href") の値を console.log などで覗いてみると解決の糸口になるかも。

[oakbow]

例えば IDが10番のユーザ情報を表示するURIは /users/10 みたいな形になります。
/users/{ユーザID} という形式ですね。
これをRailsのURIヘルパーでは users_path(id: {ユーザID}) という形で書けるようにしているわけです。
これには他の書式もあって、users_path({ユーザモデルの変数}）という書き方をすればこの変数からIDを自動的に抜き出してくれるようになっています。

[hikaru-udon]

console.logを記述しクリックしてみたところ、
<tr class="moves-contents" data-href="/characters/1/moves/1" style="cursor: pointer;">
　<td></td>・・・
</tr>
このような感じで順番に正しいパスは取れてるようなのですが、遷移ができません・・・????

[hikaru-udon]

なるほど。今回の場合、質問には載せていませんでしたが、変数の値を@moves=chracter.moves.allと設定しています。この時点で親であるcharacterのidは決まっていて、子のmovesのidを指定して変数に含むことができるので、character_move_path(id: move)と記述したときに、親と子の両方のidを記述せずとも自動的に抜き出されるidは子のmoves.idとなる、といった解釈問題ないでしょうか？冗長な文になってしまい申し訳ありません????

[oakbow]

そういやそもそも
window.location.href
じゃないんでしょうか。
window.href でも動くのかな。

[hikaru-udon]

locationを足したところ、無事遷移することができました！ありがとうございます！
URLの指定にはlocationプロパティが必要だったのですね、大変勉強になりました。
これを機にJavascriptもっと勉強してみます！