Question

I have a table and I am inserting a new row dynamically. It contains only on td. But it is occupying only one td width as here
How can i make newly inserted tr to occupy the total width of the table.

 Here number of td s are not fixed.That is, it is not always 3.  

Here is my HTML

<table>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr id='a'><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

Here is my code

$('<tr id="b" style="background-color:blue"><td >new</td></tr>').insertBefore($('#a'));

Else here is the fiddle to put hands on..

Answer 1

Add a colspan to the <td> element:

$('<tr id="b" style="background-color:blue"><td colspan="3">new</td></tr>').insertBefore($('#a'));

http://jsfiddle.net/WAuw4/5/

EDIT

If you don’t know the number of cells in the table:

var colspan = $('#a td').length;
$('<tr id="b" style="background-color:blue"><td colspan="' + colspan + '">new</td></tr>').insertBefore($('#a'));