在jQuery Mobile中動態創建表格

Question

我在html文件中創建了JQM中的表格插件。它可以正常工作

html頁面

<table data-role="table" data-mode="columntoggle" class="ui-responsive table" id="service"> 
.... 
</table> 

但我想動態創建一個表。當這樣做。 JQM默認插件不適

我的代碼是

var service_table = $('<table data-role="table" data-mode="columntoggle" class="ui-responsive table" id="service"></table>') 


      var service_tr_th = $("<tr><th>Name</th></tr>"); 
     var service_tr=$('<tr></tr>'); 
     var service_name_td=$('<td>'+retServiceName+'</td>'); 
     $(service_name_td).appendTo(service_tr); 
     $(service_tr_th).appendTo("#categories"); 
     $(service_tr).appendTo(service_table); 
     $(service_table).appendTo("#categories"); 

的HTML頁面

<div id="categories"></div> 

Answer 1

當創建一個列切換表，添加THEAD和TBODY，並data-priority="x"到頭部細胞（見http://demos.jquerymobile.com/1.4.2/table-column-toggle/）。最後調用.table()方法告訴JQM提升表：

var service_table = $('<table data-role="table" data-mode="columntoggle" class="ui-responsive table-stroke" id="service"></table>'); 


var service_tr_th = $("<thead><tr><th data-priority='1'>Name</th><th>Col2</th data-priority='2'></tr></thead>"); 
var service_tbody = $('<tbody></tbody>'); 
var service_tr = $('<tr></tr>'); 
var service_name_td = $('<td>' + retServiceName + '</td><td></td>'); 
service_name_td.appendTo(service_tr); 
service_tr_th.appendTo(service_table); 
service_tr.appendTo(service_tbody); 
service_tbody.appendTo(service_table); 
service_table.appendTo($("#categories")); 

service_table.table(); 

這裏是一個DEMO

注：你不需要$（）周圍是變量已經是jQuery集合例如service_tr，service_name_td等