I have a JavaScript object with about 1000 properties and want to create a <table>
of these entries, with eight properties in a single row, <tr>
.
I am using jQuery append()
; however, it is automatically appending a closing </tr>
tag. I want to manually define where the closing </tr>
should go. How do I accomplish this?
The object:
var g2u = {}; g2u.a1 = ""; g2u.a2 = ""; g2u.a3 = ""; g2u.a4 = ""; g2u.a5 = ""; g2u.a5a = ""; g2u.a6 = ""; g2u.a6a = ""; g2u.a6b = ""; ... etc...
The <table>
:
<table id="list" border="1"> </table> <script> var ctr = 0; $("#list").append('<tr>'); for (var g in g2u) { $("#list").append('<td><span class="rom">'+g+'</span>\n'); $("#list").append('<span class="eh">'+g2u[g]+'</span>\n'); $("#list").append('<span class="rom"> </span></td>\n'); ctr++; if (ctr % 8 == 0) { $("#list").append('</tr><tr>\n'); } }
The broken output:
<tbody><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr></tbody> <td><span class="rom">a1</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a2</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a3</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a4</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a5</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a5a</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a6</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a6a</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a6b</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a7</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a8</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a9</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a10</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a11</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a12</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a13</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a14</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a14a</span></td><span class="eh"></span><span class="rom"> </span><td><spa
If you append it will obviously try to close tags. Try to put your html in an string than append that string to the dom.
<script> var ctr = 0; var html='<tr>'; for (var g in g2u) { html+='<td><span class="rom">'+g+'</span>\n'; html+='<span class="eh">'+g2u[g]+'</span>\n'; html+='<span class="rom"> </span></td>\n'; ctr++; if (ctr % 8 == 0) { html+='</tr><tr>\n'; } } $("#list").append(html);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With