Question

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

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

Answer 1

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);

HTML表格标题未正确显示

1 个答案: