jQM another dynamic table

by Erik Zanker

HTML

<div data-role="page" id="page1">
     <div data-role="header">
        <h1>My page</h1> 
    </div> 	
    <div role="main" class="ui-content">
        
        <div id="my_data"></div>

    </div> 
</div>

JavaScript

$(document).on("pagecreate","#page1", function(){ 

    var res = {
        rows: [
            { cid: "1", name: "jui co." },
            { cid: "2", name: "abc co." },
        ]
    };
            
    renderList("hello", res);
    
    $('#my_data').on("tap",".info", function () {
        var uid = "jui. co";
        var url = "./customer_info.html" + "?id=" + $(this).prop("value") + "&name=" + encodeURIComponent(uid);
        alert(url);
        location.href = url;
    });

});


function renderList(tx, results) {
            
    var htmlstring = '<table id="myTable" style="background-color: #FAF0BA; width: 95%">\n';

    htmlstring += "<thead>\n";
    htmlstring += "<div id=\"current_login\" style=\"background-color: #009972;\"></div>\n";
    htmlstring += "<tr align=\"center\"  style=\"background-color: #009972; color: #FAF0BA;\">\n";
    htmlstring += "<td>#id</td>\n";
    htmlstring += "<td>name</td>\n";
    htmlstring += "<td>info</td>\n";
    htmlstring += "</tr>\n";
    htmlstring +="</thead>\n";
    var len = results.rows.length;            
    for (var i = 0; i < len; i++) {
        htmlstring += "<tr align=\"center\" style=\"background-color: #8AABBA; color: #FAF0BA;\" >";
        htmlstring += "<td>" + results.rows[i].cid + "</td>";
        htmlstring += "<td>" + results.rows[i].name + "</td>";
        htmlstring += "<td><button style=\"background-color: #FAF0BA; color:#00CCA5;\" data-role =\"button\" data-mini=\"true\" data-inline=\"true\" data-icon =\"info\" class=\"info\" value=\"" + results.rows[i].cid + "\">info</button></td>";
        htmlstring += "</tr>";
    }
      htmlstring +="</table>";
      $('#my_data').empty().append(htmlstring).trigger("create");
}