使用Javascript填充HTML表格並保留CSS樣式

到目前爲止，我的代碼如下工作。我唯一的問題是當表格被插入到它的父div時，HTML表格的相關樣式不會被應用。解決這個問題的最好方法是什麼？我正在使用jQuery與jQuery mobile結合使用。使用Javascript填充HTML表格並保留CSS樣式

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到它的股利。除了樣式以外的所有東西都不適用。我正在使用jQuery mobile的響應/迴流表。

來源

2013-01-16 Howard Grimberg

element.points + '';有一個語法錯誤。 td未正確關閉：element.points +''; – MatRt

內聯CSS不是很好的做法。嘗試在Javascript中定義CSS樣式或在文檔頭部的樣式標籤中定義CSS樣式。 –

我認爲你有太多重新運行表中的插件，它插入到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();

來源

2013-01-16 08:56:02

我放棄了我對列表視圖的響應。這是一個很好的替代解決方案。我也使用jquery應用正確的樣式後我插入列表代碼，但在增強之前。 –

使用Javascript填充HTML表格並保留CSS樣式

回答

相關問題