HTML表标题显示不正确

我有一个生成的表，看起来很好，除了表标题没有与数据对齐，任何帮助，将不胜感激。HTML表标题显示不正确

该代码获取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);

来源

2013-02-18 David

对于'（function（$）{}）（jQuery）+1;' – 2013-02-18 19:29:41

他们是如何看起来像？ – 2013-02-18 19:32:59

你的标题是干什么的？即数据行是否太左或右？ – shubniggurath 2013-02-18 19:34:02

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-18 19:32:35 Blazemonger

（+1）之前：http://jsbin.com/otayim/1/edit后：http://jsbin.com/otayim/2/edit – 2013-02-18 19:34:42

完美的作品，谢谢。 – David 2013-02-18 19:39:14

很高兴听到 - 不要忘记[接受你最喜欢的答案]（http://meta.stackexchange.com/q/5234/171394），以鼓励他人在未来帮助你。 – Blazemonger 2013-02-18 19:40:16

HTML表标题显示不正确

回答

相关问题