Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I force jQuery append to NOT automatically close a tag?

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 = "&#xe000;"; g2u.a2 = "&#xe001;"; g2u.a3 = "&#xe002;"; g2u.a4 = "&#xe003;"; g2u.a5 = "&#xe004;"; g2u.a5a = "&#xe005;"; g2u.a6 = "&#xe006;"; g2u.a6a = "&#xe007;"; g2u.a6b = "&#xe008;"; ... 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">&nbsp;&nbsp;</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">&nbsp;&nbsp;</span><td><span class="rom">a2</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a3</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a4</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a5</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a5a</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a6</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a6a</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a6b</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a7</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a8</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a9</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a10</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a11</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a12</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a13</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a14</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a14a</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><spa 
like image 226
Tina CG Avatar asked Oct 18 '12 07:10

Tina CG


1 Answers

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">&nbsp;&nbsp;</span></td>\n';       ctr++;       if (ctr % 8 == 0) {         html+='</tr><tr>\n';       }     }        $("#list").append(html); 
like image 53
zevy_boy Avatar answered Oct 21 '22 13:10

zevy_boy