質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1025閲覧

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

j-nagnn

総合スコア21

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/07/17 09:17

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

data属性の利用例

html

1<button class="edit" data-id="1" data-hoge="a" data-hello="こんにちは">ボタン1</button> 2<button class="edit" data-id="2" data-hoge="b" data-hello="hello">ボタン2</button> 3<button class="edit" data-id="3" data-hoge="c" data-hello="你好">ボタン3</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

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

0

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});

投稿2020/07/17 10:16

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/07/17 10:18

別ページに飛ばすなら location.href=mod.php?id=t1 みたいな処理を入れればよいでしょう
j-nagnn

2020/07/17 10:36

なるほどです。ありがとうございます。 ちなみに、var id=$(this).closest('tr').attr('id'); ってどのような動きをしているのでしょうか?
yambejp

2020/07/17 11:20

自分からさかのぼってtrに行き当たったところでそのHTML要素のid属性を拾っています
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問