Question

我在html文件中的JQM中创建表插件。它运作正常

html page

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

在jQuery Mobile中动态创建表

1 个答案: