Question

I wish to construct a complete table using jQuery.

I try to learn or copycat from this question

Create table with jQuery – append

but no luck.

What I want to create is

<table>
   <thead>
      <tr>                                  
         <th>Problem 5</th>
         <th>Problem 6</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>2</td>
      </tr>
   </tbody>
</table>

The jQuery code I created is

var $table = $('<table/>');

var $thead = $('<thead/>');
$thead.append('<tr>' + '<th>Problem 5</th>' + '<th>Problem 6</th>' + '</tr>';
$table.append(thead);

var $tbody = $('<tbody/>');
$tbody.append( '<tr><td>1</td><td>2</td></tr>' );
$table.append(tbody);

$('#GroupTable').append($table);

But it failed running.

Can anyone tell me why?

Answer 1

You are missing a right paren in your $thead declaration:

$thead.append('<tr>' + '<th>Problem 5</th>' + '<th>Problem 6</th>' + '</tr>'); 
                                                                            ^

and you aren’t appending your variables correctly:

$table.append($thead);
              ^

$table.append($tbody);
              ^

Here’s a working fiddle.