JSON形式のテーブルに区切りをつけたい

いつもお世話になります。

以下URLに飛ぶとJSON表記なのがテーブル変換して表示するソースです。テーブルに変換は出来ているのですが、これに区切りをつけることはできないでしょうか？
今のままだとテーブルは表示されるんですが各データを一つのテーブルとしてまとめてしまっているで少し見づらいです。
要は「JSON形式の中に指定してあるキーワードが来たら別のテーブルをだす処理」ということを知りたいです。ご存知の方宜しくお願いします。

HTML
1<html>
2<head>
3    <title>テーブル</title>
4    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
5    <script type="text/javascript">
6    
7    //画面構築完了後URL先を指定したらそのJSON形式のテーブルを表示する。
8    $(function() {
9        $("").ready(function(){
10          $.ajax({
11              type: 'GET',
12              url: 'http://localhost:8180/api/stock/search?q=',
13              dataType: 'json',
14              jsonCallback: 'data',
15              success: function(json){
16                var rows = "";
17                    
18                     $.each(json, function(i, item){
19              
20                      
21                        $.each(item,function(key,value){
22                        rows += "<tr>";
23                        rows += "<td>";
24                        rows += key;
25                        rows += "</td>";
26                        rows += "<td>";
27                        rows += value;
28                        rows += "</td>";
29                        });
30                      
31                    });
32                    //テーブルに作成したhtmlを追加する
33                    $("#tbl").append(rows);
34              }
35            });
36        });
37    });
38
39    </script>
40</head>
41<body>
42    <table id="tbl" border="1">
43        <tbody>
44            <tr>
45                <th>項目</th><th>名前</th>
46            </tr>
47        </tbody>
48    </table>
49</body>
50</html>

一部JSONデータ

JSON
1[ {
2"she_name" : "ハッチ",
3  "ste" : "左",
4  "rive" : "tt",
5  "shi" : "A",
6  "cap" : 7,
7・・・

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

回答2件

ベストアンサー

テーブルを分けるとなると、最終的なテーブルの数は一つではありませんね。
それなら HTML 上にtableタグを直接書かないほうがいいでしょう。

現在はtr要素のみを流し込んでいますが、
tableタグそのものを JavaScript で作って流し込みます。
HTML には複数のテーブルを出力するためのエリアを一つ作っておきましょう。

外側のeachのループ1回分で1テーブルが作られるようにするといいと思います。

投稿2015/11/06 04:53

tozjp

総合スコア790

takato

2015/11/06 05:22

tozip様いつもありがとうございます。 table用にJSファイルを作るというわけですか？またHTMLのeachにループ処理する機能を付け加えるということでしょうか？

tozjp

2015/11/06 06:39

> table用にJSファイルを作るというわけですか？現在は tr を生成している JavaScript を table を生成するように変更するということです。新しく別のファイルにするほどのことではないと思います。 > HTMLのeachにループ処理する機能を付け加えるということでしょうか？まず、もともと each 自体がループ処理なのですが、それは大丈夫ですか？

takato

2015/11/06 07:09

tozip様やってみます！！＜tr＞タグをテーブルタグにしてチャレンジしてみます。知らなかったです。。。お恥ずかしい

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

「区切り」とはどんなイメージでしょうか？
$.each()の中でif文分岐して判定したらいいんじゃないかと思います。

あと、<tr>タグが閉じていないので、閉じたほうがいいと思います。

投稿2015/11/06 02:55

kaputaros

総合スコア1844

takato

2015/11/06 03:05

kaputaros様初めまして。コメントありがとうございます。少し見づらいと思いますが例を出します。＿＿＿ id 1 name たぬき id　２ name　きつね ____ これを＿＿＿ id 1 name たぬき＿＿＿＿ id　２ name　きつね ____ と項目ごとというか区別したいのです。eachにif文とはどんな感じでしょうか？・・確認しましたが<tr>タグは閉じているはずです。ｍ（＿＿）ｍ

tozjp

2015/11/06 04:46

eachの中で、<tr>で始まっている部分が</tr>で終わっていない箇所のことでしょう。しかしこれは仕様上問題ありません。 http://vllv.us/Junk/htmlTag/

kaputaros

2015/11/06 05:25 編集

> eachにif文とはどんな感じでしょうか？・・ $.each()の第二引数に無名関数を渡していると思いますが、 function(){～}にタグ作成処理を書いているように、if文も普通に書けると思います。「タグ作成前に判定を追加、区切りたい`key`の値だったら、1行分追加する」とかどうでしょう？↓こんな感じになるかと。 if("区切りたいkey値"==key){rows+="<tr><td colspan='2'> </td></tr>";} > tozjpさんその箇所です。 HTML5でも省略可なんですね。以前、<tr>の閉じタグがなくてデザインが崩れたことがあったような気がしたもので。

takato

2015/11/06 07:11

kaputaros様コード載せていただいてありがとうございます。初心者にはかなり助かります。リベンジしてみます。

kaputaros

2015/11/06 07:58 編集

ちょっと思ったのですが、横列が｜項目｜名前｜にするのではなく、下記のように、jsonの1つのレコードを横一列に並べて、１行１レコードずつにすればいいのではないでしょうか？｜she_name｜ste｜rive｜shi｜cap｜･･･そしたら、区切りは必要なくなるかと。もし、｜項目｜名前｜で出さなきゃならない、というならばムリなのですが･･･^^;

takato

2015/11/06 08:09

kaputaros様確かにそうですね！横に試してみます $.each(item,function(key,value){ rows += "<tr>"; rows += "<td>"; rows += key; rows += "</td>"; rows += "<td>"; rows += value; rows += "</td>"; }); の個所を変更すればいいですよね？

takato

2015/11/06 08:11

ただ横にしたところで区切りは出来るもんなんですかね？

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

あなたの回答