0

csv ファイルを解析し、コンテンツをテーブルに配置する JavaScript があります。

2D配列を通過してhtml文字列を作成する非常に一般的な関数でテーブルを生成しています。私はそれから

document.getElementById("StringTable").innerHTML = result;

私のテーブルは問題なく生成され、必要なものにうまく機能します。

見栄えを良くするためにCSSスタイリングを適用したかったのですが、cssファイルをテーブルに反映させることができないようです。

cssがロードされた後にテーブルが生成されるためだと思いますが、これを回避する方法がわかりません。私に何ができる？

HTML:

<body>
    <div id="StrRecTable">


    </div>
</body>

Javascript:

function makeTableHTML(array) {
    var result = "<table border=2, width=1000px>";
    result += "<thead><tr><th>Date</th><th>D_1</th><th>D_2</th><th>D_3</th><th>D_4</th><th>D_5</th><th>D_6</th></thead><tbody>";
    // Create header row. Better way to do this?
    //for (var i = 0; i < array.length; i++) {
    for (var i = array.length-1; i > 0; i--) {
        result += "<tr>";
        for (var j = 0; j < array[i].length; j++) {
            result += "<td>"+array[i][j]+"</td>";   
        }   
        result += "</tr>";
    }   
    result += "</tbody></table>";
    document.getElementById("StrRecTable").innerHTML = result;
}

CSS: (これは、ある Web サイトから自動的に生成されたものです。いじってみたかっただけです。

body {background-color:#888888;}

.StrRecTable {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #125b07;

-moz-border-radius-bottomleft:25px;
-webkit-border-bottom-left-radius:25px;
border-bottom-left-radius:25px;

-moz-border-radius-bottomright:25px;
-webkit-border-bottom-right-radius:25px;
border-bottom-right-radius:25px;

-moz-border-radius-topright:25px;
-webkit-border-top-right-radius:25px;
border-top-right-radius:25px;

-moz-border-radius-topleft:25px;
-webkit-border-top-left-radius:25px;
border-top-left-radius:25px;
}.StrRecTable table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.StrRecTable tr:last-child td:last-child {
-moz-border-radius-bottomright:25px;
-webkit-border-bottom-right-radius:25px;
border-bottom-right-radius:25px;
}
.StrRecTable table tr:first-child td:first-child {
-moz-border-radius-topleft:25px;
-webkit-border-top-left-radius:25px;
border-top-left-radius:25px;
}
.StrRecTable table tr:first-child td:last-child {
-moz-border-radius-topright:25px;
-webkit-border-top-right-radius:25px;
border-top-right-radius:25px;
}.StrRecTable tr:last-child td:first-child{
-moz-border-radius-bottomleft:25px;
-webkit-border-bottom-left-radius:25px;
border-bottom-left-radius:25px;
}.StrRecTable tr:hover td{

}
.StrRecTable tr:nth-child(odd){ background-color:#7f7f7f; }
.StrRecTable tr:nth-child(even)    { background-color:#333333; }.StrRecTable td{
vertical-align:middle;


border:1px solid #125b07;
border-width:0px 1px 1px 0px;
text-align:left;
padding:5px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#ffffff;
}.StrRecTable tr:last-child td{
border-width:0px 1px 0px 0px;
}.StrRecTable tr td:last-child{
border-width:0px 0px 1px 0px;
}.StrRecTable tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.StrRecTable tr:first-child td{
    background:-o-linear-gradient(bottom, #5fbf00 5%, #5fbf00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #5fbf00) );
background:-moz-linear-gradient( center top, #5fbf00 5%, #5fbf00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#5fbf00");  background: -o-linear-gradient(top,#5fbf00,5fbf00);

background-color:#5fbf00;
border:0px solid #125b07;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:12px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.StrRecTable tr:first-child:hover td{
background:-o-linear-gradient(bottom, #5fbf00 5%, #5fbf00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #5fbf00) );
background:-moz-linear-gradient( center top, #5fbf00 5%, #5fbf00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#5fbf00");  background: -o-linear-gradient(top,#5fbf00,5fbf00);

background-color:#5fbf00;
}
.StrRecTable tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.StrRecTable tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}

HTML/CSSを追加するために編集

4

2 に答える 2

2

CSS は.StrRecTableのクラスを使用しますが、JavaScript は ID で参照します

document.getElementById("StrRecTable").innerHTML = result;

クラスを div に追加するか、CSS で ID を参照すると機能します。

<body>
    <div id="StrRecTable" class="StrRecTable">


    </div>
</body>

これは、ホルダー DIV の ID を参照するように更新された CSS で動作するJSFiddleです。

于 2013-11-08T16:31:02.200 に答える
1
  • HTML には、idStrRecTable の div が含まれています。

  • CSSclassは StrRecTableの要素をターゲットにしています

    1. .someTextclass「someText」の要素をターゲットにします

    2. #someTextid「someText」の要素をターゲットにします

シンプル！

于 2013-11-08T16:29:57.423 に答える