<table>のデータを<tr>別に読み取るには?

HTMLの表で、列ごとにある"編集"ボタンを押すと、<td>タグに挟まれているテキストデータを取得して、別の画面に持ち越すというものを作っているのですが、読み取り方と、送り方が分からずに困っています。

HTML
1<!DOCTYPE html>
2<html>
3 <head>
4  <meta charset = "UTF-8">
5  <meta http-equiv="content-language" content="ja">
6  <meta http-equiv="Content-Script-Type" content="text/javascript">
7  
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
9  <link rel="stylesheet" type="text/css" href="./bb.css">
10  
11
12   <title>色ペンマスタ</title>
13 </head>
14 
15 <body>
16 <script type="text/javascript" src="./bank.js"></script> 
17 <header class ="obih">色ペンマスタ</header>
18  <h1>ペンキ一覧</h1> 
19 <form class = "youso">
20  
21  
22  <table class = "btable01">
23 
24   <tr><th>色</th><th>マーカー素材</th><th>メーカー名</th><th>メーカーコード</th>
25   <th>編集</th><th>削除</th></tr>
26   <tr id=t1><td>GREEN</td><td>水性</td><td>A社</td><td>0101</td>
27   <td> <button class="update" text-align:center>編集</button></td>
28   <td> <button class="sakujyo" text-align:center>削除</button></td></tr>
29    <tr id=t2><td>ORANGE</td><td>水性</td><td>B社</td><td>0102</td>
30   <td> <button class="update" text-align:center>編集</button></td>
31   <td> <button class="sakujyo" text-align:center>削除</button></td></tr>
32    <tr id=t3><td>PINK</td><td>油性</td><td>C社</td><td>0103</td>
33   <td> <button class="update" text-align:center>編集</button></td>
34   <td> <button class="sakujyo" text-align:center>削除</button></td></tr>
35  </table>
36 </form>
37 </body>
38</html>

例えば、id=t2の列の編集ボタンをおしたら、id=t2のデータを読み取って、別画面に遷移するときに値を渡してくれるみたいな。感じです。(言葉間違っていたらすみません)

教えてくれる方、いたらよろしくお願いします。

ブラウザ:googlechrome

行動規範の内容に同意します

回答2件

ベストアンサー

できないことはないですけど、結局は「押されたボタンから」辿る(parent)ことになるので、それならbuttonにdata属性で渡したい情報埋め込んでおいた方が楽かと思います。

data属性の利用例

html
1<button class="edit" data-id="1" data-hoge="a" data-hello="こんにちは">ボタン１</button>
2<button class="edit" data-id="2" data-hoge="b" data-hello="hello">ボタン２</button>
3<button class="edit" data-id="3" data-hoge="c" data-hello="你好">ボタン３</button>
4

js
1$(function(){
2	$('.edit').on('click',function(e){
3		console.log($(e.currentTarget).data('id'));
4		console.log($(e.currentTarget).data('hoge'));
5		console.log($(e.currentTarget).data('hello'));
6	})
7})

投稿2020/07/17 10:11

編集2020/07/17 19:30

m.ts10806

総合スコア80875

j-nagnn

2020/07/17 10:23

データが複数ある場合も、data属性が使えるんですか? （今回の例だと、「GREEN/水性/A社/0101」の4つを渡したい）

m.ts10806

2020/07/17 10:38

data属性は調べてもらえればわかりますが、data-[任意の名前]で定義できるので幾つでもできますし、属性値にJSON文字列も設定できるのでそれこそ考え方次第です。

j-nagnn

2020/07/17 10:39

なるほどです。ありがとうございます。

m.ts10806

2020/07/17 10:41

想像つかない、分からないなら正直に言ってもらった方が。

j-nagnn

2020/07/17 10:45

ボタンのクリック時に、location.hrefを使って、画面遷移しているんですけど、その際にどうやってdata属性をつけるのか想像つかないです。

j-nagnn

2020/07/17 10:56

定義後の扱い方が分からないです。教えてもらえると助かります

m.ts10806

2020/07/17 11:20

要件もうひとつ教えてください。遷移先ではどのように渡した情報を受けとるのですか？サーバーサイドの言語があるのか、JavaScriptだけなのかどういう使い方をするか次第で、「より使いやすい渡しかた」を考えます。

m.ts10806

2020/07/17 11:23

あとそもそも渡したい情報ってどのように取得しているものなのか？もご提示ください。やりたいことに答えるだけならすぐですが、それが好ましい手法かどうかは全体の流れから考えて選択する必要があります

j-nagnn

2020/07/17 13:05

遷移先のテキストボックスに、渡す情報をそれぞれセットします。言語はhtmlとjavascriptだけです。

m.ts10806

2020/07/17 19:21

＞遷移先ではどのように渡した情報を受けとるのですか？という部分はどうなのでしょう。こちらのほうが大事です。サーバーサイドの言語使わないなら意図的に受け取るように書かないといけません。「渡す情報をそれぞれセットします」と仰いますが「受け取る」部分が抜けてます。とりあえず情報だけ取れれば何とかするというのなら構いませんが、失礼ながら今の質問者さんの感じから、その部分ができるとは思えません。こちらもあまり丸投げ回答はしたいと思ってませんが・・

j-nagnn

2020/07/17 20:10

＞遷移先ではどのように渡した情報を受けとるのですか？ >サーバーサイドの言語使わないなら意図的>に受け取るように書かないといけません。 →ごめんなさい。意図的に受け取るような書き方が分かってなかったです。遷移先で宣言されてる変数に送られたデータをひとつずつ受けとるという感じにするのかなと思ってました。

m.ts10806

2020/07/17 20:17

受け取り方が決まらないと渡し方（送り方）も決まりません。遷移元の画面で変数定義しても遷移先で使えるわけではないですし、「どう受け取ってどう使うか（使いたいか）」によって渡す情報も渡し方も変わってきます。

j-nagnn

2020/07/17 20:40

>「どう受け取ってどう使うか（使いたいか）」によって渡す情報も渡し方も変わってきます。 →postで受け取って、受け取ったデータをテキストボックスのvalue値に入れたいです(<input type='text' value=○○>)

m.ts10806

2020/07/17 20:46

>postで受け取って JavaScriptでは不可能です。送信する（リクエストを送信する）のはクライアントサイドの役割ですが、送信先はサーバーサイドです。GETリクエスト（URLパラメータ、クエリストリング）の解析ならできなくもないですけど。そもそもの話 >「GREEN/水性/A社/0101」の4つについてもどこから取得した情報なのか、という点、如何でしょうか。割と最初の方に確認投げているのですが・・・＞あとそもそも渡したい情報ってどのように取得しているものなのか？もご提示ください。

j-nagnn

2020/07/17 21:49 編集

>「GREEN/水性/A社/0101」の4つ >についてもどこから取得した情報なのか、>という点、如何でしょうか。 >割と最初の方に確認投げているのですが →<tb>タグに挟まれているテキストからです。直打ちです。渡したい情報は<tb>タグのテキストです。value値の方が渡しやすいでしょうか？

j-nagnn

2020/07/17 21:54

>GETリクエスト（URLパラメータ、クエリストリング）の解析ならできなくもないですけど。 →セキュリティの面で不安な部分がありますが、それしか方法ないなら、GETリクエストの解析した方が楽ですよね

m.ts10806

2020/07/17 22:33

後だしの要件がどんどん出てきて困ってます。「やりたいことに答えるだけならすぐですが、それが好ましい手法かどうかは全体の流れから考えて選択する必要があります」と指摘したのですが中々伝わらないようで。要件的にそもそもデータはDBにすべきで、サーバーサイドの言語をバックエンドに添えるべきで。というか、本当に全てHTML,css,JavaScriptしかしないならどういうセキュリティリスクを懸念されてますか？

j-nagnn

2020/07/18 01:36

>本当に全てHTML,css,JavaScriptしかしないならどういうセキュリティリスクを懸念されてますか？ →urlを、覗いて内容が知られるっていうリスクです要件を後だしにしているつもりはなかったのですが、混乱させてしまって申し訳ありません。解決はしたいですが、やりたいことが分からなくなってきてしまったので、また整理して投稿します

m.ts10806

2020/07/18 03:30

再度書きますが、POST送信受け取れるのは結局サーバーサイドの言語なので、JavaScriptでやりきるのは無理です。それにブラウザのデベロッパーツール使えばリクエスト・レスポンスは見れるし、クライアントサイドの情報はJavaScript含めて改ざんできるので、根本的な方針転換をしないことには懸念されているリスク回避は出来ません。手法は置いといて、要件定義からやり直しかと思います。

m.ts10806

2020/07/18 04:19

もしかしたら気づかれてないかもしれませんが、回答にdata属性使った値の取得のサンプル書いてます。一応検証済みのもの。使えるか導入するかは置いといて、確認しておいてもらえると選択肢も広がった状態で要件考えられるかと。リクエストはどのように送ろうとGETはGETだし、POSTはPOSTです。その場にinput置かなくてもJavaScriptでフォームリクエストの送信はできます。ただ、受けとりは結局サーバーサイドです。 GETでも結局JavaScriptでは「受け取り」ではなく「URLの解析の解析処理を組む」だけなので、送信された情報を受けとるのとは意味合いが違います。

j-nagnn

2020/07/18 05:15

意味合いの考え方なんですね。長々と付き合ってもらってありがとうございます

m.ts10806

2020/07/20 21:25

意味合いというより「要件」「仕様」です。つまり作る側の「決め」の問題です。

行動規範の内容に同意します

javascript
1$(function(){
2  $('.update').on('click',function(e){
3    e.preventDefault();
4    var id=$(this).closest('tr').attr('id');
5    console.log(id);
6  });
7});