Question

我在项目中使用jQuery mobile 1.4.5。

我通过点击动态创建带按钮的表格。创建表时，JQM样式不适用。

这是我的HTML代码：

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div data-role="content" class="ui-content">
    <button onclick="CretaeTable()">Cretate table</button>
     <div id="vectorLayerslist"></div>
</div>

这是JavaScript代码：

function CretaeTable(){
    var vectorLayersList = $('#vectorLayerslist');
    var arr  = [{id:'124',Title:'qqq'}, 
               {id:'589',Title:'www'}, 
               {id:'45',Title:'eee'},
               {id:'567',Title:'rrr'}]

    var table = layersListTable(arr);
     vectorLayersList.append(table);
}

function layersListTable(layers) {
    // build the table
    var frame = '<fieldset style="border: solid 1px #6b6b6b;">';
    var smallHeader = '<legend>title</legend>';
    var content = frame + smallHeader + '<table data-role="table" id="layersListEditable" data-mode="columntoggle:none" class="ui-responsive"><thead><tr></tr></thead>';
    $.each($(layers), function () {
        // we'll store the ID in HTML5 data-attribute for later
        content += '<tr>';
        // give classes to your buttons for later
        content += '<td><button data-mini="true" data-inline="true" data-icon="edit" data-theme="b" type="button" class="edit">Edit</button></td>';
        content += '<td><button data-mini="true" data-inline="true" data-icon="delete" data-theme="b" type="button" class="delete">Delete</button></td>';
        content += '<td style="vertical-align: inherit;">' + this.Title + '</td>';
        content += '</tr>';
    });
    content += '</table>';
    content += '</fieldset>'

    return content;
}

这是JSFIDDLE。

为什么JQM样式不适用？

Answer 1

你的jist只需要重建表格，然后可能更新整个页面内容的布局：

 ... your dynamic table creation
 vectorLayersList.append(table);
 // add this:
 $("#layersListEditable").table().table("rebuild");
 $(".ui-content").trigger("updatelayout");

请注意：您也可以调整按钮标记，如下所示：

content += '<td><button class="ui-btn ui-mini ui-btn-inline ui-btn-icon-left ui-icon-edit">Edit</button></td>';
content += '<td><button class="ui-btn ui-mini ui-btn-inline ui-btn-icon-left ui-icon-delete">Delete</button></td>';

这是您更新的小提琴：http://jsfiddle.net/aJUy8/105/

为什么动态创建表时不应用jQuery移动样式

1 个答案: