Find offsetWidth of EACH object in array -- Javascript (NO JQuery)

Question

I've been looking of an answer for this for a few hours:

How can I get the console.log to print the offsetWidth for each td in my table? (WITHOUT using JQuery)

Say I have this table:

                <table>
                    <thead>
                        <tr>
                            <th>One</th>
                            <th>Two</th>
                            <th>Three</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>A One</td>
                            <td>A Two</td>
                            <td>A Three</td>
                        </tr>
                        <tr>
                            <td>B One</td>
                            <td>B Two</td>
                            <td>B Three</td>
                        </tr>
                    </tbody>
                </table>

I want to find the offsetWidth of each of the <td> in the first row.

I've tried this:

var tbodyfistRowCells = tbody.querySelectorAll('tr:first-of-type > td');

for(i = 0; i < tbodyfistRowCells.length; i++){var tbodyColumnWidths = tbodyfistRowCells[i].offsetWidth;}
console.log(tbodyColumnWidths);

It's returning what looks like the offsetWidth of only the last <td>. I need the offsetWidth of every <td>.

I'm new to Javascript. I'm sure I'm missing something obvious and important, I just don't know what to ask the interweb to search for...

Note: The end goal of this is to use the offsetWidth of the <td> to set the width of its respective <th> when the header is fixed to the top of my page (hopefully to override the fixed column width issue). If you can tell me how to use the offsetWidth of one array to change its respective index item in another array (i.e. td[2].offsetWidth = th[2].offsetWidth) that would be a great plus, though obviously not the subject of this question.

Alex L · Accepted Answer · 2020-01-21 22:52:28Z

1

Try this (Demo - https://codepen.io/Alexander9111/pen/dyPwJvM)

const tbody = document.querySelector('tbody');
const tbodyfistRowCells = tbody.querySelectorAll('tr:first-of-type > td');

for(i = 0; i < tbodyfistRowCells.length; i++){
    var tbodyColumnWidths = tbodyfistRowCells[i].offsetWidth;
    console.log(i, tbodyfistRowCells[i].innerText)
    console.log(i, tbodyColumnWidths)
}

Note I find the <tbody> element first

Console Output:

0 "A One"
0 44
1 "A Two"
1 45
2 "A Three"
2 54

answered Jan 21, 2020 at 22:52

Alex L

4,2711 gold badge11 silver badges30 bronze badges

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

3 Comments

KarinaKreative Over a year ago

This is perfect! (I forgot to include my definition for the tbody in my question.) The "i" in the console.log was the key. That calls the index number I'm assuming?

Alex L Over a year ago

No, I believe your error was having your console.log() outside of your loop, so you changed the var tbodyColumnWidths three times but then just logged it out once. Happy to have helped.

KarinaKreative Over a year ago

Ah, I see. Thank you for the clarification :)

Collectives™ on Stack Overflow

Find offsetWidth of EACH object in array -- Javascript (NO JQuery)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related