在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等