ansaurus

Question

Set width of td depending on No of td using jquery

Answer 1

+4 A:

To get the number of columns:

var num = $("#table > tr > td").length;

To specify the width:

$("#table > tr > td").width(w + "px");

I hope this was what you were looking for

Edit:

To specify the width to a specific column:

//if you've specified an id to each td

$("#td1").width(td1Width+"px");

//if you just use classes to identify them

$("td.td1", "#table1").width(td1Width+"px");

I would also recommend you to look into find() and end() to select columns in an efficient way. since making a $() call is a more expensive operation:

$("#table1").find("#td1").width(td1Width+"px").end().find("#td2")...

Edit 2

try this instead

$("table > tr > td:eq(0)").css("width", "50%");

or even better

$("table > tr > td").eq(0).css("width", "50%").end()
                    .eq(1).css(...etc;

"table" will select all tables on the page; use id or class to identify which table you require.

Edit 3 (final!!)

Ok, now i can see all the code i can give a better answer. try this:

var num;
var $tds;
$("table").each(function(i, t) {
   $tds = $("td", t);
   num = $tds.length;

   if (num % 4 == 0) {
        $tds.eq(0).css("width", "50%").end()
            .eq(1).css("width", "30%").end()
            .eq(2).css("width", "10%").end()
            .eq(3).css("width", "10%");
    }
    if (num % 3 == 0) {
        //etc
    }
});

I hope this is a better answer :)

Mouhannad 2010-10-14 09:19:26

there would be a problem if there's `rowspan`

Reigel 2010-10-14 09:27:06

@Mouhannad: Thanks for your answer. To set the width of the td, wouldn't that set the same width to all tds?

Cesar Lopez 2010-10-14 09:27:43

That is not working for me as it gets all tds on table and set same width for all td. But thanks anyway.

Cesar Lopez 2010-10-14 09:42:02

yes it would. i couldn't make it a more specific answer since you didn't share your html. so because i don't know your html structure i just made a general code. check my edit

Mouhannad 2010-10-14 10:03:40

@Mouhannad: Sorry you are right I did not put the html, the problem is that the code is generic to apply to several pages and they can have several tables or one, therefore I am not using classes or id I just need to go through each table, find the No of columns on the table and set the width of the columns for each table depending on the No of Columns. Thanks.

Cesar Lopez 2010-10-14 10:32:48

@Mouhannad:I like your Edit2 but for some reason can't get it to work.

Cesar Lopez 2010-10-14 10:45:27

@Mouhannad:There is a small problem, which is, How can I figure out how many columns does the table have? Thanks a lot for your effort.

Cesar Lopez 2010-10-14 10:47:11

@Mouhannad: Great! thanks a lot + 1 and Accepted solution :-).

Cesar Lopez 2010-10-14 10:49:43

I'm glad it's solved :)

Mouhannad 2010-10-14 10:53:55

ansaurus

tags:

views:

answers:

Set width of td depending on No of td using jquery

related questions