HTML表格呈現在一行中

-1

我試圖用userscript動態生成表格。HTML表格呈現在一行中

var divWrap = document.createElement('div'); 
     divWrap.style.fontFamily = "sans-serif"; 
     divWrap.style.width = "100%"; 
    var spanTitle = document.createElement('span'); 
     spanTitle.style.marginRight = "auto"; 
     spanTitle.style.marginLeft = "auto"; 
     spanTitle.style.fontSize = "1.5em"; 
     spanTitle.innerHTML = "Countdown"; 
     divWrap.appendChild(spanTitle); 
    var createTable = document.createElement('table'); 
     createTable.style.marginLeft = "auto"; 
     createTable.style.marginRight = "auto"; 
     createTable.style.width = "50%"; 
     createTable.id = "cdn_table" 
     divWrap.appendChild(createTable); 
    createTable.appendChild(addRow("test", "12d")); 
    createTable.appendChild(addRow("test2", "24h")); 
    mainDiv.getElementsByTagName('span')[0].appendChild(divWrap); 

function addRow(rName, rValue) { 
    console.log(rName + ": " + rValue); 
    var row = document.createElement('tr'); 
    var tName = document.createElement('td'); 
    tName.innerHTML = rName; 
    var tValue = document.createElement('td'); 
    tValue.innerHTML = rValue; 
    row.appendChild(tName); 
    row.appendChild(tValue); 
    return row; 
}

的問題是，所有的元素都在一行呈現：http://i.imgur.com/MjMtdDg.png

有我缺少一些CSS值？或者是其他東西？我想用Firefox中的Scriptish在縮略圖中插入簡單的標題和表格。

來源

2014-02-22 JonnyRobbie

表格具有用於添加行/單元格的自己的接口。

var t = document.createElement("table"); 
var r = t.insertRow(-1); 
var c = r.insertCell(-1); 
c.innerHTML = "Foo"; 
c = r.insertCell(-1); 
c.innerHTML = "Bar"; 

document.body.appendChild(t);

http://jsfiddle.net/tQWm8/1/

來源

2014-02-22 22:45:39

也許使用'的appendChild（document.createTextNode（...））'，而不是'.innerHTML = ...'。示例代碼應該使用最不容易出錯的方法來完成任務。 –

'innerHTML'如何引發任何問題？ 'innerText'是一直沒有跨瀏覽器的。 –

如果人們養成使用innerHTML插入文本節點的習慣，那麼他們會將它與不受信任的數據或包含HTML特殊字符的純文本一起使用。 –

HTML表格呈現在一行中

回答

相關問題