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

1 Answer 1

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.

2
  • 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
    Commented Jul 14, 2019 at 11:43
  • @rmarq423 Sure, you can read about it on MDN ( template literals ).
    – sfdcfox
    Commented Jul 14, 2019 at 13:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .