How to create a dynamic Table ?

Question

Is there any way to create a dynamic html table element using Jquery .

In This table I want to add the Td inner element as anchor tag.

Answer 1

You can do something like this

Use the append function

$("#divID").append("<table><tr><td><a href='3#'>Click me</a></td></tr></table>");

or just create the table markup as string and use the

html()

to append it inside a container

var strTable = "<table><tr><td><a href='#'>Click</a></td></tr></table>";

$("#div1").html(strTable.toString() );

If you have more complex markup then use an array

var arrTableMarkup = new Array();
arrTableMarkup.push ( "<table>" );
arrTableMarkup.push (     "<tr>" );
arrTableMarkup.push (    "<td>" );
arrTableMarkup.push (     "<a id='anch1' href='#'>Click</a>" );
arrTableMarkup.push (    "</td>" );
arrTableMarkup.push (    "</tr>" );
arrTableMarkup.push ( "</table>" );

$("#div1").html(arrTableMarkup.join('') );

Edit

If you need to add an onclick event then you can specify the anchor tag an id and then use the live method to assign event.

$("#anch1").live ( "click" , function () { EventHandlerFunction() } );

Answer 2

The most simple (and maybe the fastest) way is to do it from HTML:

var table = $('<table><tr><td><a href="#">Hello World!</a></td></tr></table>');

Doing table.find('a') will give you the anchor, if needed.