0

私はjavascriptで動的にテーブルを作成しています。また、私はテーブルをフォーマットするためにいくつかのcssコードを訴えています。しかし、私のコードはフォーマットを取得していません。テーブルの周りに境界線を追加するような最も単純なものでさえありません。これが私のコードです：

function parseRequest_ls(response) {
    document.getElementById("files").innerHTML += "<table border='2'>";

    for(var i=0;i<5;i++){
        if(response.data[i].type == "folder" || response.data[i].type == "album") {
            document.getElementById("files").innerHTML += "<tr><td><b>+</b> <a href='#'>"+ response.data[i].name + "</a></td></tr>";
        }
    }
    document.getElementById("files").innerHTML += "</ul></table></div>";
}

CSSコード：

table, th, td {
    border: 2px solid;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}

caption {
    font-size: 150%;
    font-weight: bold;
    margin: 5px;
}

td, th {
    padding: 4px;
}
4

3 に答える 3

2

あなたの関数にはあなたが持っています

document.getElementById("files").innerHTML += "<table border='2'>"; // first line

と

document.getElementById("files").innerHTML += "</ul></table></div>"; // last line

最後の行に終了ulタグ</ul>と終了divタグを配置しましたが、どちらに</div>も開始を使用しなかったため、が壊れています。内部を.でラップせずに使用しないでください。したがって、この場合は使用できますtaguldivHTMLultabletd

function parseRequest_ls(response) {
    var trs='';    
    for(var i=0;i<5;i++){
        if(response.data[i].type == "folder" || response.data[i].type == "album") {
            trs +="<tr><td><b>+</b> <a href='#'>"+ response.data[i].name + "</a></td></tr>";
        }
    }
    document.getElementById("files").innerHTML += "<table border='2'>"+trs+"</table>";
}

簡単な例。

于 2012-08-05T20:21:25.040 に答える
1

+=と一緒に使用しないでくださいinnerHTML。最初に一時変数で文字列を作成し、次に文字列に完全な（そして有効な）HTMLが含まれる+=と、それを使用して要素に追加できます。

于 2012-08-05T20:24:39.793 に答える
-1

そのため、問題は、innerHTMLを介してテーブルを作成できないことでした。私はDOMオブジェクトを使用してそれをしなければなりませんでした。DOMオブジェクトを作成してから、createElementを作成してテーブルを取得しました。少し簡単ではありませんが..それはうまくいきました..しかし、あなたの提案に感謝します。:)

于 2012-08-06T04:09:53.533 に答える