How to construct a complete HTML table using jQuery?

Question

I wish to construct a complete table using jQuery.

I try to learn or copycat from this question

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?

@jason yes, I have everything, I will edit with some more information. — Jackson Tale
– Jackson Tale, Commented Jun 4, 2012 at 21:59
the single most important thing you can do right now is learn how to check the error console in a web browser, so that you can help yourself in the future by checking for error messages. — goat
– goat, Commented Jun 4, 2012 at 22:05

Jason · Accepted Answer · 2012-06-04 21:59:02Z

2

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.

answered Jun 4, 2012 at 21:59

Jason

52.7k38 gold badges139 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pablo Mescher Over a year ago

actually, he is missing more than that. jsfiddle.net/77uLd Here it is working

Pablo Mescher Over a year ago

paren is parenthesis. You should check your syntax before assuming you are doing something wrong. usually ctrl+shift+j will show all syntax errors as they are found (in chrome at least)

user1419950 · Accepted Answer · 2012-06-04 22:02:41Z

0

thead, tbody is undefined? $thead, $tbody?

$table.append(thead);

and

$table.append(tbody);

answered Jun 4, 2012 at 22:02

user1419950

3261 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to construct a complete HTML table using jQuery?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related