CODEWITHSUNDEEP
jquerydom
Exception
Exception

Reputation: 8389

How to make a newly inserted <tr> tag to occupy the total width of the table

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..

Upvotes: 1

Views: 168

Answers (5)

Jason Gennaro
Jason Gennaro

Reputation: 34863

You could add colspan=3 in your new td

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

Example: http://jsfiddle.net/WAuw4/4/

Here's a bit more on the colspan attribute: http://reference.sitepoint.com/html/td/colspan

EDIT:

Based on your comment

But number of <td> s is not always fixed.

I would do this

Check the number of td in the first row. Add that to your colspan

var len = $('tr:first td').length;

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

Example: http://jsfiddle.net/WAuw4/7/

Upvotes: 2

Riz
Riz

Reputation: 10246

total_td = $('table tr:first td').length;

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

Upvotes: 2

Niranjan Singh
Niranjan Singh

Reputation: 18290

Use Colspan to adjust the span of the td in the row. 

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

I have checked on you jsfiddle..

you should have some fixed or predictable count of <td> else how can you manage this.. if you want to implement such approach then on the place of <td> use <div>

Upvotes: 0

Moe Sweet
Moe Sweet

Reputation: 3721

insert colspan="3" like this

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

Upvotes: 0

Clive
Clive

Reputation: 36955

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'));

Upvotes: 2

Related Questions