HTML表标题显示不正确

HTML Table Headings Not Displaying Properly

本文关键字：不正确 显示 标题 HTML      更新时间：2023-09-26

我有一个生成的表，除了表标题没有与数据对齐之外，它看起来很好，任何帮助都将不胜感激。

代码获取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);
相关文章：