問題点が複数ある為、少し長くなりました。
1. 連想配列の取得が間違っている
javascript
1if(data.length > 0){
2 …
3}
連想配列からlength
は取得できない為、for
の処理に入っていません。連想配列の確認は
javascript
1data instanceof Object
で確認できます。
2. JSONデータの取得方法が間違っている
javascript
1var $label = $('<label>' + data[i].name + '</label>');
JSONデータには、data[i]
には、name
キーは指定されていない為、取得できません。
data[i]
で値が取得できます。
3. テーブルのIDが間違っている
html
1<table style="text-align:left;" border="1" cellpadding="2" cellspacing="2" id="tabale_sp" class="tbl_info">
id=table_sp
が正しいと思います。
4.For文の処理が間違っている
javascript
1for(var i in data){
2 var $input = $('<input type="checkbox" />').attr({name: 'color[' + data[i].code + ']'}).attr("value",'1' );
3 var $label = $('<label>' + data[i].name + '</label>');
4 $("table#table_sp td#place").html($input).append($label);
5}
同じtd#place
の変更をしているため、項目は増えないです。
あと、HTML生成時は、テキストで一気に書いた方がいいです。
慣れてきてからjQuery
で書かないと混乱すると思います。
修正例
javascript
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
7 </head>
8 <body>
9 <script>
10 $(function(){
11 $('#pd').click(function(){
12 var mark = $('#mark').val();
13 var dt = new Date().getTime();
14 $.ajax({
15 type: "POST",
16 // url: "/hoge/pg001/" + dt,
17 url: './a.json',
18 data: {"mark":mark},
19 dataType: "json",
20 cache: false,
21 success: function(data, status){
22 for(var i in data){
23 var html = '<label><input type="checkbox" name="color['+i+']" value="1">'+data[i]+'</label>';
24 $("table#table_sp td#place").append(html);
25 }
26 },
27 error: function(XMLHttpRequest, status, errorThrown){
28 alert("エラーが発生しました!");
29 }
30 });
31 });
32 });
33 </script>
34 <table style="text-align:left;" border="1" cellpadding="2" cellspacing="2" id="table_sp" class="tbl_info">
35 <button id="pd">取得</button>
36 <tbody>
37 <tr id="place">
38 <th>サンプル</th>
39 <td id="place"></td>
40 </tr>
41 </tbody>
42 </table>
43
44 </body>
45</html>
46
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。