0

I want to pull the styling (width) of one pageBlockTable and apply it to another pageBlockTable dynamically with jQuery - however I'm not sure why this isn't working...

This code runs without any issues but it does not change the width of the apex:pageblocktable column. I am running these in the console too, so it doesn't appear to be a timing issue i.e. the DOM is not being ready.

   function resizedummytable(){ //does not resize properly
    var table = $(".wrappertableid");

    table.find('th').each(function (i) {
        var $tds = $(this).find('th'),
            colwidth = $(this).width();

        $('.dummytableid th:eq( i )').css({"width": +colwidth});
        $('.dummytableid th:eq( i ) div').css({"width": +colwidth});
        $('.dummytableid tr td:eq(  i )').css({"width": +colwidth});
        $('.dummytableid tr td:eq( i ) div').css({"width": +colwidth});

            console.log(i+'width='+colwidth);

            /*results in:
                0width=29
                1width=94
                2width=99
                3width=118
                4width=206
                5width=95
                6width=191
                7width=117
                8width=83
                9width=83
                10width=156
                11width=118
            */
    });
}

However the below method runs and resizes my first column just fine

     function resizetemptable(){ //resizes properly
            colwidth = 29;
            $('.dummytableid th:eq( 0 )').css({"width": +colwidth});
            $('.dummytableid th:eq( 0) div').css({"width": +colwidth});
            $('.dummytableid tr td:eq( 0 )').css({"width": +colwidth});
            $('.dummytableid tr td:eq( 0) div').css({"width": +colwidth});
 }

enter image description here

3

jQuery uses normal CSS selectors-like syntax. It doesn't know that "i" is a variable that should be used, nor can it directly know this. Instead, you can use a template string:

$(`.dummytableid th:eq(${i})`).css(...

Note that we use backtick instead of apostrophe or quotation marks, and the ${variable} notation. This should result in each table being selected.

| improve this answer | |
  • Thanks Fox, wow I owe you one. I'm not sure I understand the ` (backtick) character and the reasoning for why this works... I'll have to read up on that. – rmarq423 Jul 14 '19 at 11:43
  • @rmarq423 Sure, you can read about it on MDN ( template literals ). – sfdcfox Jul 14 '19 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.