-1

ユーザースクリプトを使用して動的にテーブルを生成しようとしています。

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

問題は、すべての要素が次のように 1 行でレンダリングされることです: http://i.imgur.com/MjMtdDg.png

不足している css 値はありますか? または、他の何か？FirefoxのScriptishでそのサムネイルに簡単なタイトルと表を挿入したい..

4

1 に答える 1

1

テーブルには、行/セルを追加するための独自のインターフェイスがあります。

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-22T22:45:39.393 に答える