jQM - Fix for dynamic table creation

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
<script src="http://timeago.yarp.com/jquery.timeago.js"></script>
<script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css" />
    <script src="http://jquerymobile.com/demos/1.3.0-beta.1/js/jquery.mobile-1.3.0-beta.1.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content">
            <table id="tableProp" data-role="table" data-mode="Reflow" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-popup-theme="a">
                <thead>
                    <tr class="ui-bar-d">
                        <th data-priority="2" style="text-align: center">Test1</th>
                        <th  style="text-align: center">Test2</th>
                        <th data-priority="3" colspan=2  style="text-align: center">Test3</th>
                    </tr>
                </thead>
                <tbody id="tbProp">


                </tbody>
            </table>
            <a id="test-btn" data-role="button">Table test</a>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

JavaScript

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#test-btn', function(){       
        var tb = $('#tbProp');
        newRow = '<tr><td style="text-align: center;vertical-align:middle">' + 'Test11' + '</td> <td style="text-align: center;vertical-align:middle">' + '23.3'+ '</td><td style="text-align: center;vertical-align:middle"><a href="#" data-role="button" data-mini="true">Test22</a></td><td style="text-align: center;vertical-align:middle"><a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-mini="true">Test33</a></td></tr>',
        newBody = "";
        for (var i = 0,
             l = 6; i < l; i += 1) {
            newBody += newRow;
        }
        tb.empty().append(newBody);
        
        $("#tableProp").trigger('create')
    });    
});