sdbbs sdbbs - 4 months ago 23
jQuery Question

Generating table with jquery row by row?

In the example HTML file below,

test.htm
, I have a hardcoded table, which I'm trying to (re-)generate with jQuery; so far, I just tried to reconstruct the two header rows, but unfortunately it doesn't work - this is what I get in Firefox:

tblffox

Essentially, I'm trying to do something like this in jQuery:

var row1 = $("#tblGen").append($('<tr>'));
row1.append( $('<th>').attr("rowspan","2").text('AA'));
...
var row2 = $("#tblGen").append($('<tr>'));
...
var tbody = $("#tblGen").append($('<tbody>'));
...


... meaning, I try to create row, then populate it, then another row, then
tbody
- but what I'm getting is
tbody
first with two empty
tr
s, and then
th
s outside of a
tr
.

So I'm obviously doing something wrong - what am I doing wrong, and how could I generate the example table with jQuery (just the first two header rows would be enough, I guess)?

The file
test.htm
:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.tblTest,
.tblTest tr th,
.tblTest tr td {
border-style: solid;
border-color: #000;
border-spacing: 0;
border-collapse: collapse;
padding: 4px;
border-width: 1px;
font: 12px helvetica,arial,sans-serif;
}
.tblTest tr th {
background-color: #BBB;
}
.tdh { border-width: 2px; } /* NOWORK */
</style>
<!-- <script type="text/javascript" src="../jquery-1.12.3.min.js"></script> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
function GenerateTable() {
$("#tblGen").html("");
// compose the table headers (two rows)
var numcolspan=3;
var row1 = $("#tblGen").append($('<tr>'));
row1.append( $('<th>').attr("rowspan","2").text('AA'));
row1.append( $('<th>').attr("colspan",numcolspan).text('BB') );
row1.append( $('<th>').attr("colspan",numcolspan).text('CC') );
row1.append( $('<th>').attr("colspan",numcolspan).text('DD') );
var row2 = $("#tblGen").append($('<tr>'));
for(var ix=0; ix<3; ix++) { // loop three times
row1.append( $('<th>').text('EE') );
row1.append( $('<th>').text('FF') );
row1.append( $('<th>').text('GG') );
}
var tbody = $("#tblGen").append($('<tbody>'));
}
ondocready = function() {
GenerateTable();
}
$(document).ready(ondocready);
</script>
</head>

<body>
<h2>Table I want to create:</h2>

<table id="tblTested" class="tblTest">
<tr>
<th rowspan="2">AA</th>
<th colspan="3" class="tdh">BB</th>
<th colspan="3" class="tdh">CC</th>
<th colspan="3" class="tdh">DD</th>
</tr>
<tr>
<th>EE</th>
<th>FF</th>
<th>GG</th>
<th>EE</th>
<th>FF</th>
<th>GG</th>
<th>EE</th>
<th>FF</th>
<th>GG</th>
</tr>
<tbody id="TestTBody">
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

<h2>Generated:</h2>
<div id="divholder">
<table id="tblGen" class="tblTest">
</table>
</div> <!-- divholder -->

</body>
</html>

Answer

Two problems I could see is, you cannot append partial HTMLs. You need to compile the HTML and then append or change the innerHTML (using .html() or something). Consider the below code:

<p><b>Hello <a href="#">link</a></b></p>

If you are doing it this way, the results will be crazy:

$(el).append("<p>");
$(el).append("<b>");
$(el).append("<a href='#'>");
$(el).append("link");
$(el).append("</a>");
$(el).append("</b>");
$(el).append("</p>");

The above code will give you totally undesired results. You need to do it in a different way:

html = "<p>";
html += "<b>";
html += "<a href='#'>";
html += "link";
html += "</a>";
html += "</b>";
html += "</p>";
$(el).append(html);

The other critical issue is that, when you are using something like:

$(el).append("<p>");

The above returns $(el) as a jQuery object and not <p>. I guess that's the fundamental problem with your code.