HTML table headers not displaying correctly
I have a generated table that looks great except for the table headers not lined up with the data, any help would be appreciated.
The code gets the JSON and then iterates over it, creating a table to display it finally in a div on the HTML page.
Code below:
<!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);
+3
source to share
1 answer
jQuery will automatically close any HTML elements you create. The tag <table>
cannot be added separately from the tag </table>
.
So instead of
$("#des").append(tableHeader);
// ....
$("#des").append(html);
// ....
$("#des").append(tableFooter);
You must first add an empty table and then add rows to the body of the table:
$("#des").append(tableHeader + tableFooter);
// ...
$("#des tbody").append(html);
Better yet, concatenate everything into one line and add everything at once for better performance:
var table_html = tableHeader;
// ....
table_html += html;
// ....
table_html += tableFooter;
$("#des").append(table_html);
+4
source to share