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

Populating HTML table with Javascript and retaining CSS style

本文关键字：保留 CSS 样式 Javascript 填充 HTML      更新时间：2023-09-26

到目前为止，我有下面的代码工作。我唯一的问题是，当表插入到父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移动

我认为你已经重新运行插件表后，它被插入到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();
相关文章：