Displaying Width of Tables on Page with jQuery

Question

Sometimes I let the easiest 101 type questions get me! Well, time for the latest chapter. Lets say I have a html page with one or more tables. Using jQuery I want to display the width of each table found.

Here's the my simple / basic table html -

 <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
            <thead>
                <tr>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <p>
        </p>
        <table border="1" cellpadding="1" cellspacing="1" style="width: 250px;">
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <p>
        </p>
        <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>

Here's the jQuery I'm using -

    <script>
   $(document).on("pageshow", function () {          
          $("table:visible").each(function () {
        alert($(this).width);
    });
   });
   </script>

I'm using pageshow being this will be part of a jquery mobile site but it easily could be the standard jquery document.ready.

I do indeed get the alert prompt three times but I am not getting width of the current table (this). I'm getting some long message like this -

function (i,o){var a=arguments.length&&(r||"boolean"!=typeof i),s=r||(i===!0||o===!0?"margin":"border");return b.access(this,function(n,r,i){var o;return b.isWindow(n)?n.document.documentElement["client"+e]:9===n.nodeType?(o=n.documentElement,Math.max(n.body["scroll"+e],o["scroll"+e],n.body["offset"+e],o["offset"+e],o["client"+e])):i===t?b.css(n,r,s):b.style(n,r,i,s)},n,a?i:t,a,null)} 

So what obvious thing am I misunderstanding?

Answer 1

try below code

$(document).on("pageshow", function () {          
    $("table:visible").each(function () {
        alert($(this).width());
    });
});

Answer 2

Adding the brackets after width() gave me the functionality I was looking for.