3

テーブルの見出しがデータと並んでいないことを除いて、問題ないように見える生成されたテーブルがあります。助けていただければ幸いです。

コードは JSON を取得し、それをループしてテーブルを作成し、最終的に HTML ページの div 内に表示します。

コードは以下のとおりです。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* { 
    margin: 0;
}

html, 
body { 
    background-color: white;
    font-family: arial, helvetica, verdana, sans-serif;
    font-size: 16pt;
}

.d0 {
    background-color: #EFFBFB; /*#FCF6CF;*/
}
.d1 {
    background-color: #E0F8F7; /*#FEFEF2;*/
}   
</style>


</head>
<body>

<div id="des"></div>
</body>
</html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function($) {
var json = { 
        1: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
        2: { description:"Description", code:"1234", code1:"1234", code2:"1224"}, 
        3: { description:"Description", code:"1234", code1:"1234", code2:"1224"}, 
        4: { description:"Description", code:"1234", code1:"1234", code2:"1224"}, 
        5: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
        6: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
        7: { description:"Description", code:"1234", code1:"1234", code2:"1224"}, 
        8: { description:"Description", code:"1234", code1:"1234", code2:"1224"}, 
        9: { description:"Description", code:"1234", code1:"1234", code2:"1224"}, 
        10: { description:"Description", code:"1234", code1:"1234",
        code2:"1224"}            
    };

  var tableHeader = 
  "<table>" +
  "<tr>" + 
  "<th>Actions</th>" +
  "<th>Description</th>" +
  "<th>Code</th>" +
  "<th>Code1</th>" +
  "<th>Code2</th>" +
  "</tr>";
  var tableFooter = "</table>";
  console.log(tableHeader);

  $("#des").append(tableHeader);

  $.each(json, function(key, value) {
    var cssName = "d";
    var cssKey = key % 2 == 0 ? 1 : 0;
    cssKey = cssName + cssKey;
    var html =    
    "<tr class=\"" + cssKey + "\">" + 
    "<td><a href=\"/common/Service?id=" + key + "\">Modify</a></td>" + 
    "<td>" + this.description + "</td>" +
    "<td>" + this.code + "</td>" +
    "<td>" + this.code1 + "</td>" +
    "<td>" + this.code2 + "</td>" + 
    "</tr>";
    console.log(html);
    $("#des").append(html);
  });

  $("#des").append(tableFooter);
  console.log(tableFooter);
  })(jQuery);

4

1 に答える 1

4

jQuery は、作成した HTML 要素を自動的に閉じます。<table>タグとは別にタグを追加することはできません</table>。

だから代わりに

$("#des").append(tableHeader);
// ....
$("#des").append(html);
// ....
$("#des").append(tableFooter);

最初に空のテーブルを追加してから、テーブル本体に行を追加する必要があります。

$("#des").append(tableHeader + tableFooter);
// ...
$("#des tbody").append(html);

さらに良いことに、すべてを単一の文字列に結合し、それを一度に追加してパフォーマンスを向上させます。

var table_html = tableHeader;
// ....
table_html += html;
// ....
table_html += tableFooter;
$("#des").append(table_html);
于 2013-02-18T19:32:35.013 に答える