tdタグにvalue

Question

###したいこと
テーブルのセルをクリックして、その詳細データを表示させる。。ということがしたいです。

例えば、こういうtable（Web画面に表示されています）があり、

No	品目	季節
1	りんご	秋
2	りんご	夏
3	ばなな	夏

「No1：りんご」をクリックすると
SQLが実行⇒データ取得
⇒別窓でデータ表示（下表のような）

日付	品目	売数	残	季節
2019/6/30	Apple	130	20	秋
2019/7/31	Apple	120	50	秋

そのために、りんご をクリックされたときに、
「Apple」と「秋」というvalueがほしいな･･･と思いました。。。

ただ、<td>タグにvalueとなると、どうしたらいいのでしょうか。。

<td>タグにvalueつけることなんてできないですよね。。。？ ```html <td value="Apple">りんご</td> ```

###追記

あとはこれくらいしか思いつかなかったのですが。。

<td><input type="hidden" name="english" value="Apple" >りんご</td>

詳細記載遅くなり、申し訳ありません。。。
どなたか教えていただけると助かります。。宜しくお願いします。。。。

###追記②（data属性を試した結果）

<td class="fruit" data-test ='Apple,秋'>りんご</td>

 test = $('table tr.data td.fruit).data("test");
 console.log(test)//undefined

そもそもdata属性の使い方が間違っていたらすみません、、
よろしくお願い致します。

Comments

[kei344]

「何がしたくて」そのような記述が必要になるのでしょうか。その部分から提示されたほうが回答しやすいです。

[azuapricot]

なんでvalueつけたいかはわかんないですけど　こんなのもあるよとだけ
https://www.webprofessional.jp/how-why-use-html5-custom-data-attributes/

[xx_6_6_xx]

急いでいたもので、質問が端的すぎました、、ご指摘ありがとうございます！
参考URL大変たすかります；；ありがとうございます。。。！

[m.ts10806]

「なぜそうしたいのか」前提や背景、目的を具体的に記載してください。

[azuapricot]

「あとはこれくらいしか思いつかなかったのですが。。」
回答者としては何がしたくてそうなるのかがわからないので現状これ以上の回答はちょっと出来ないなーって感じですね

[azuapricot]

そのtdタグがクリックされたときに、↑でリンクした取得したい部分のdata属性を持ってくるようにしたらよいのでは？

[azuapricot]

data属性つかってみましたか？

[xx_6_6_xx]

ありがとうございます！！
使ってみました！･･･ですが、undefinedになってしまい、なぜかな･･･というところで止まっています。。。

[m.ts10806]

そのコードをご提示ください。

[azuapricot]

でしたら質問に追記で、undefinedになったコードを貼りましょう。

[xx_6_6_xx]

追記しました。。。！
よろしくおねがい致します；；

[m.ts10806]

データベースの定義によります。（何があるか）
画面上に表示されているのが`りんご`で別窓でデータ表示が`Apple`なのはどういうい紐づけなのかが気になります。
そもそも元の画面に表示されているデータがどういう風に取得されたものか？
からアプローチしたほうが良いと思いますので、そこも含めてご提示ください。

「やりたいこと」と「適切な手段」は必ずしも一致しません。
単に「やりたいこと」に答えるのは簡単ですが、それが結果的に非効率になるのであれば、そこは「適切な手段」を伝えることも回答のスタンスとしてはあっていいと思っています。

[m.ts10806]

クリックイベント含めて記載してください。（そもそもそのコード、構文エラーです）

[azuapricot]

一部だけじゃなくてある程度は記載してもらったほうが再現もしやすいですし、回答も得られやすいです。

Answer 1

<td>タグにvalueつけることなんてできないですよね。。。？

文法違反ではありますが、「value属性を書き込む」「それをgetAttributeで読み取る」程度のことは可能です（もっとも、正式に使っていいdata-***属性を活用したほうがいいとは思いますが）。

Comments

[xx_6_6_xx]

ありがとうございます！
なるほど。。。であれば、data属性を使っておきたいと思います。。。。

Answer 2

やりたいことがこれでできるのかはさっぱり謎ですが、一応サンプルコードです。

<table>
    <tr>
        <td class="fruit" data-test ='Apple,秋'>
            りんご
        </td>
    </tr>
</table>

$('.fruit').click(function(){
    console.log($(this).attr('data-test'));
});

出力結果

"Apple,秋"

Answer 3

例えば、こういうtable（Web画面に表示されています）があり、
「No1：りんご」をクリックすると
SQLが実行⇒データ取得
⇒別窓でデータ表示（下表のような）

この流れでいくと、「こういうtable」を表示しているページと「別窓でデータ表示」は別ページとして作るのがわかりやすいと思います。
（例としてサーバサイドをPHPにしますがご自身の使う言語に置き換えて考えてください）

たとえば「別窓」ページを「betumado.php」というファイルで用意して、「betumado.php?key=apple」でアクセスしたら「apple」に関連する物をDBから呼び出すようにします。

そして、「こういうtable」側にはそのページに行くためのリンクを付ければよいです。

<a href="betumado.php?key=apple">apple</a>

---

もう一つのやり方としては、「別窓」に載せるつもりのデータをHTML内に置いておいて、JavaScriptで「窓」風の物に表示させる方法です。
xx_6_6_xxさんのやりたい、具体的なデータや見せ方がわからないので、まずは「JavaScript モーダル」「JavaScript モーダル ライブラリ」「JavaScript モーダル 作り方」などで検索してみて作ってみてください。