Q&A
例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html
やりたいこと
tableタグを使い画面上にデータを表示しています。
最終列には編集というボタンを用意しております。
編集ボタンを押すと、ボタンが押された行のデータを別のページにPOSTしたいと考えております。
POSTのハンドリグを行っているサーバはnode.jsになります
- html(http://example.com/table)
<form role="form" name="form" method="post" action="./table/edit"> <table> <thead> <tr> <th>id</th> <th>name</th> <th>age</th> <th>編集</th> </tr> </thead> <tbody> <tr> <td>01</td> <td>suzuki</td> <td>18</td> <td><button type="submit" name="postData[]" onclick="GetTdData()">編集</button></td> </tr> <tr> <td>02</td> <td>tanka</td> <td>19</td> <td><button type="submit" name="postData[]" onclick="GetTdData()">編集</button></td> </tr> <tr> <td>03</td> <td>saitou</td> <td>2o</td> <td><button type="submit" name="postData[]" onclick="GetTdData()">編集</button></td> </tr> ・ ・ <<省略>> </tbody> </table> </form>
やってみたこと
以下のようなjqueryを作成してみましたが、「data[]」に格納された配列データをhtml側で定義したname「postData[]」に配列データとしてキレイに渡す事が出来ません。
- javascript(jquery)
function GetTdData(){ // セレクタを指定したclickイベントでは要素が取得できないためonメソッドを利用 $(document).on('click', ':button', function(){ // tdの数 var tdNum = $(this).closest('tr').children('td').length; var ti = 0; var data = new Array(); for (ti=0; ti<tdNum; ti++) { data[ti] = $(this).closest('tr').children('td').eq(ti).text(); $(':button[name="postData[]"]').eq(ti).val(data[ti]); }; };
- node.js(express使ってます。だいぶ省略してすみません)
router.post('/edit', function(req, res, next) { console.log('call table edit page'); console.log(req.body) });
以下のような出力になってしまいます
{ targetTable_length: '10', 'postData[]': '0' }
今回のようにテーブルで表示されたデータから、ある行のデータを別のページに飛ばして利用したいと行った場合に「hidden」を使わずに飛ばすやり方を皆様はどのように実現されておりますか？
もし参考になるページやプログラムがあればご紹介頂けると嬉しいです
回答2件
0
ちょっとツッコミいれると、
"別のページにPOSTしたい"という表現をつかってますが、
どういうこと？
1つのページに複数のページを同時に表示させる運用なの？
iframeで別のページを読み込んでいてそいつにPOSTするの？
プッシュ通知？
WebSocket？
Server Sent Events？
HTTP/2？
と質問を見た人にあらぬ混乱をさせてしまいます。
ようは、アドレスがページのアドレスじゃないけど、サーバーにデータをPOSTしたいっていう理解であってますよね？
もう一つツッコミ
インラインでonclick="GetTdData()"として、すでにボタンのイベントリスナーはってるのに、GetTdData()内でさらに$(document).on('click', ':button', ～でさらにイベントリスナーをはってる。これじゃ、クリックするたびにイベントリスナーはりまくって、１回のクリックで実行される回数がどんどん膨れ上がってしまう。
検証ページ
さて、一応私からも回答させていただきます。考え方はほぼ@kei344さんと同じですけど。
クリックされたところのデータを取得してPOSTするとなると<form>タグは不要かと思います。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <title>test</title> 5 <meta charset="UTF-8"> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 7 <script defer src="postdata.js"></script> 8 </head> 9 <body> 10 <table> 11 <thead> 12 <tr> 13 <th>id</th> 14 <th>name</th> 15 <th>age</th> 16 <th>編集</th> 17 </tr> 18 </thead> 19 <tbody> 20 <tr> 21 <td>01</td> 22 <td>suzuki</td> 23 <td>18</td> 24 <td><button type="button">編集</button></td> 25 </tr> 26 <tr> 27 <td>02</td> 28 <td>tanka</td> 29 <td>19</td> 30 <td><button type="button">編集</button></td> 31 </tr> 32 <tr> 33 <td>03</td> 34 <td>saitou</td> 35 <td>20</td> 36 <td><button type="button">編集</button></td> 37 </tr> 38 </tbody> 39 </table> 40 </body> 41</html>
javascript
1// postdata.js (クライアント側) 2$('button').click(function() { 3 var memberNames = ['id', 'name', 'age']; // 全メンバー名 4 var numMember = ['age']; // 数値メンバー 5 var postData = {}; 6 $(this).parent().siblings().each(function(i) { 7 var val = $(this).text(); 8 postData[memberNames[i]] = numMember.includes(memberNames[i]) ? +val : val; 9 }); 10 $.ajax({ 11 type: 'POST', 12 url: './table/edit', 13 data: JSON.stringify(postData), 14 contentType: 'application/json' 15 }); 16}); 17
javascript
1// main.js (Node.jsサーバー側) 2const express = require('express'); 3const bodyParser = require('body-parser'); 4const app = express(); 5 6app.use(express.static(__dirname)); 7app.use(bodyParser.json()); 8 9app.post('/table/edit', (req, res, next) => { 10 // POSTデータをコンソールに表示 11 console.log(req.body); 12}); 13 14app.listen('9001');
投稿2017/02/15 22:38
総合スコア4267
turbgraphics200様
早朝に関わらず、コメント・ご回答ありがとございます。
私の質問の内容が悪く、どういったことがやりたいのかが不透明な質問となってしまい
大変申し訳ありませんでした。
また、javascript側のご指摘について大変ありがとございます。
ご共有頂いたサイトについてもこれから活用させて頂きたいと思います。
今回やりたかったことの補足については、kei344様のコメントに記載させて頂いてある通りとなります。
turbgraphics200様にもベストアンサー付けさせていただきたかったのですが、お一人しかつけることが出来ませんので第一回答者のkei344様に付けさせて頂きました。
大変申し訳ありません。。。
0
ベストアンサー
button要素にvalue属性を持たせることが出来るので、それで分岐は出来ると思います。（送るデータがテーブル内のほかの値なら事前に処理しておく）
【<input type=submit>は止めて<button type=submit>を使うべき - Qiita】
http://qiita.com/irxground/items/c8537d30e9760c5b3e5c
HTML
1<form> 2 <button type='submit' name='action' value='send'>送信</button> 3 <button type='submit' name='action' value='save'>下書き保存</button> 4</form>
【1つのform内で複数のsubmitボタンを作成する方法 - smallplaceの日記】
http://d.hatena.ne.jp/smallplace/20130708/1373287891
追記：
内容を読み違えていました。
HTML
1<button type='submit' name='postData' value=''>編集</button>
JavaScript
1$( 'button[name="postData"]' ).each( function() { 2 var $_td = $( this ).closest( 'tr' ).children( 'td' ); 3 var data = []; 4 $_td.each( function() { 5 data.push( $( this ).text() ) 6 } ); 7 $( this ).val( JSON.stringify( data ) ); 8} ); // 未テスト
これでサーバ側で postData を JSON.parse() すれば良いような。
投稿2017/02/15 14:00
編集2017/02/15 15:01総合スコア69407
複数の値を配列的に送りたいならJSONにしてvalueに代入とか。（自分が質問を勘違いしている気が･･･）
質問余り読んでないですが、ボタンで処理を分岐させたいなら value を送ってサーバサイドで if 文で分岐より、 formaction で POST 先を変えたほうがよくないですか？
今もう一度質問を読みなおしたところ、
「同じ行のtd要素の中身を配列にしてPOSTしたい」ということのようです。
なので、前もってvalueにJSON化した配列を入れておいて、
<button type='submit' name='postData' value=''>編集</button>
でいいと思います。（受け取り側で分岐もなし）
send/saveというフラグじゃなくデータ自体をJSONで渡すのですか、ならformactionはいらないですね
kei344 さんの回答で良いと思いますが、サーバサイドではfor-ofして一つ一つ JSON.parse する必要があるのでご注意ください。
個人的にはまとめて JSON.parse したくなるので
<input type="hidden" name="table" value="[["suzuki","18"],["tanka","19"],["saitou","2o"]]" />
を一つだけ生成して送信ですかね…。
To: think49さん
多分ですが、1行目の button要素をクリックでPOSTして、
[ '01', 'suzuki', '18' ]
という配列を得たいのではないかと 予想して button要素に stringifyしたものを入れています。
node.jsは不勉強なのですが、
{ targetTable_length: '10', 'postData': '["01","suzuki","18"]' }
こういう結果を受け取って、
let data = JSON.parse( req.body.postData );
こういうことかなぁ、と。
To: kei344 さん
同じく、Node.js は不勉強ですが、name="postData[]" から想像するにPHPと同様に配列でPOSTパラメータを受け取る動作を想定していました。
var postData = ['["suzuki","18"]','["tanka","19"]','["saitou","2o"]'];
console.log(JSON.stringify(postData)); // ["[\"suzuki\",\"18\"]","[\"tanka\",\"19\"]","[\"saitou\",\"2o\"]"] (初期状態)
postData = postData.map(JSON.parse);
console.log(JSON.stringify(postData)); // [["suzuki","18"],["tanka","19"],["saitou","2o"]] (JSON.parse 後)
ですので、JSON.parse(postData); は SyntaxError になるのでご注意ください、と(間違っていたらすみません)。
To: think49さん
> name="postData[]"
そうなんですよ。確かにそう書かれているのですが、なんとなく質問者さんは「配列が受け取りたい」と思ってこう書いたのではないかとの予想（勘）です。なので私の回答では
name="postData"
としています。（そこにコメントを入れたほうがよかったですね）
postData[]で送る場合は指摘いただいたとおり、気をつけないとエラーになります。
kei344様 lazex様 think49様
まずは遅い時間にも関わらずコメント、ご回答ありがとございます。
私の質問の書き方が悪いために、いろいろと想像頂いてコメントしてくださり申し訳ありませんでした。
私のやりたかったことは概ねkei34様が予想で書いてあるとおりでした。
もう少しやりたかった事を記載しますと「http://example.com/table」というテーブル形式でデータを表示するページを用意しており、表示されているテーブルのある行の編集ボタンを押下すると、「http://example.com/table/edit」というデータ編集ページに遷移して、押下した行のデータが表示・編集出来るようなページを作成しようとしておりました。
質問した時点では、何となく配列形式でデータが渡さればといいなーぐらいの間隔でしたが、皆様のコメントに記載頂いてある通りJSON形式でPOSTして、アプリケーション側でパースする事で上手くデータを受取る事が出来ました。
大変勉強になりました。ありがとございます。
あと、kei344様のスクリプトからこんなスクリプトを考えてみました。
```
$(document).on('click', ':button', function(){
var $tdData = $(this).closest('tr').children('td');
var data = [];
$tdData.each(function(){
data.push($( this ).text());
});
$(this).val(JSON.stringify(data));
});
```
カスタムデータ属性 data-* を使うのってどうでしょうか？最近使いだしたんでよく理解していないのですが、こういう時に使えそうかと。
To: iarikさん
tableを組む時点で何かしらのデータソースが有ると思いますが、そこにIDを持たして、そのIDを次のページに渡すのが一般的な実装かと思います。（編集するって言うことはデータとしてどこかに保存するということでしょ？）
To: te2jiさん
データを入れておくことは出来ますが、入れただけではPOSTできませんよ。
$( this ).text() を区別なく POST をするってのが、ちょっと気持ち悪いかなって思ったんですが、今回のケースだと冗長かもしれないですね。コメントありがとうございます。
あなたの回答
tips
プレビュー
