Setting the width of columns with an array as parameter

Question

I have the following function:

function LoadColWidth(thewidtharray) {

    for (i = 0; i < thewidtharray.length; i++) 
    {
        $('#MyGrid .tr:first').eq(i).width(thewidtharray[i]);
    }
};

var NarrowWidth = new Array(70, 72, 97, 72, 97, 72, 96, 76, 76, 76, 76, 75);

I'm calling LoadColWidth with different arrays as the parameter and the goal is to resize the width of columns. I'm struggling with the jquery call: it's supposed to loop through each columns by index but it's not working. Any suggestions?

Thanks.

user113716 · Accepted Answer · 2011-02-21 21:51:26Z

1

Select the <td> elements in the first row, and iterate over them using the each()^(docs) method.

Inside the .each(), use the index parameter it provides to select from your Array of widths.

 // Use the "index" parameter--------------v
$('#MyGrid tr:first > td').each(function( i ) {
    $(this).width( thewidtharray[i] );
});

Or here's an alternative if you're using jQuery 1.4.1 or later:

 // Use the "index" parameter---------------v
$('#MyGrid tr:first > td').width(function( i ) {
    return thewidtharray[i];
});

edited Feb 21, 2011 at 21:51

answered Feb 21, 2011 at 20:15

user113716

323k64 gold badges454 silver badges441 bronze badges

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

6 Comments

frenchie Over a year ago

This works. However, I'm actually looking to loop only through the columns of a certain class and I haven't been able to make the code look to see if the column is of the class .MyClass. Working on it but kinda stuck...

user113716 Over a year ago

@frenchie: I just noticed that your code has a misplaced . before tr:first, which I ended up copying. Fixed. If you're only targeting td elements with a certain class, you'd do $('#MyGrid .tr:first > td.myClass'). I may be able to give a better answer if you provide a sample of your table in your question.

frenchie Over a year ago

So, should I remove the dot or keep it? The table is a gridview; some columns are of class MyClass and some are not.

user113716 Over a year ago

@frenchie: I made the same copy/paste error in my comment, but fixed it in my answer. You're selecting a <tr> element, so you do not want the . before tr. $('#MyGrid tr:first > td.myClass')

user113716 Over a year ago

...or use th if that's what you have in the first row $('#MyGrid tr:first > th.myClass')

|

Collectives™ on Stack Overflow

Setting the width of columns with an array as parameter

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related