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

到目前为止，我有下面的代码工作。我唯一的问题是，在将HTML表插入其父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;
}

var tableBase='EventScore'；
函数构建表（数据）{
var tableCopy=tableBase；
forEach（函数（元素、索引、数组）{
tableCopy=tableCopy+“”+element.event+“”
+元素。点数+“”；
});
tableCopy=tableCopy+“”；
返回表格副本；
}

---

然后我有了一个

#（'#targetDiv'）.html（buildTable（myData））

，它将表格html插入到它的div中。除了不应用样式之外，其他一切都可以工作。我使用的是jQuery mobile的responsive/reflow表。

我认为您在将该表插入DOM后也重新运行了该表的插件：

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;
}

---

我认为您在将表插入DOM后也重新运行了该表的插件：

---

元素。点数+“”；有一个语法错误。td未正确关闭：element.points+“”；内联CSS不是好的实践。尝试用Javascript或文档head.element.points+''的样式标记定义CSS样式；有一个语法错误。td未正确关闭：element.points+“”；内联CSS不是好的实践。尝试用Javascript或文档头部的样式标记定义CSS样式。我放弃了使用列表视图。这是一个很好的替代方案。在插入列表代码之后，但在增强之前，我还使用jquery应用适当的样式。这是一个很好的替代方案。在插入列表代码之后，但在增强之前，我还使用jquery应用适当的样式。