Question

到目前为止，我的代码如下工作。我唯一的问题是当表插入其父div时，不会应用HTML表的相关样式。解决这个问题的最佳方法是什么？我正在使用jQuery与jQuery mobile一起使用。

var tableBase = '<table data-role="table" id="score-table" style="margin-left: auto; margin-right: auto;" class="ui-responsive table-stroke ui-table ui-table-reflow"><thead><tr><th data-priority="1">Event</th><th data-priority="2">Score</th></tr></thead><tbody>';
function buildTable(data) {
     var tableCopy = tableBase;
     data.forEach(function(element, index, array) {
         tableCopy = tableCopy + '<tr><td>' + element.event + '</td><td>'
            + element.points + '<td></tr>';
      });
tableCopy = tableCopy + '</tbody></table>';
return tableCopy;
}

然后我有一个#('#targetDiv').html(buildTable(myData))将表格html插入其div中。除了未应用样式外，一切正常。我正在使用jQuery mobile的响应/重排表。

Answer 1

我认为在将表插入DOM后，你也重新运行了该表的插件： http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/page-dynamic.html

// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();

// Enhance the listview we just injected.
$content.find( ":jqmData(role=listview)" ).listview();

使用Javascript填充HTML表并保留CSS样式

1 个答案: