我有一个生成的表格，除了表格标题没有与数据对齐外，它看起来不错，如果有任何帮助，我们将不胜感激。
代码获取 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);
最佳答案
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);
关于javascript - HTML 表格标题显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14943860/