1

行が適切に色付けされていません」

私のHTML出力を見てください：

<table id="mytable" cellspacing="0" cellpadding="5">
<tbody>
<tr class="tableheader">
<th>Name</th>
<th>Code</th>
<th>Value</th>
<th>Bid</th>
<th>Offer</th>
</tr>
<tr class="rowoddcolor">
<td>Apple</td>
<td>APPL</td>
<td>111</td>
<td>112</td>
<td>110</td>
</tr>
<tr class="tablecontent">
<td>Microsoft</td>
<td>MSFT</td>
<td>78</td>
<td>70</td>
<td>75</td>
</tr>
<tr class="rowevencolor">
<td>Google</td>
<td>GOGL</td>
<td>101</td>
<td>98</td>
<td>102</td>
</tr>
<tr class="tablecontent">
<td>Nokia</td>
<td>NOK</td>
<td>10</td>
<td>8</td>
<td>9</td>
</tr>
<tr class="rowoddcolor">
<td>Samsung</td>
<td>SAMS</td>
<td>89</td>
<td>86</td>
<td>90</td>
</tr>
<tr class="tablecontent">
<td>IntelCorporation</td>
<td>INTC</td>
<td>111</td>
<td>112</td>
<td>110</td>
</tr>
</tbody>
</table>

1行目と5行目だけ色が付く？なんで3列目じゃないの?

更新されたコード:

function tablerows(id){
    if(document.getElementsByTagName){  
        var tableid = document.getElementById(id);  
        var rows = tableid.getElementsByClassName('tablecontent'); 
        for(i = 0; i < rows.length; i++){          
            if(i % 2 == 0){
                rows[i].className = "rowevencolor";
            }else{
                rows[i].className = "rowoddcolor";
            }      
        }
    }
}

$(document).ready(function() {
                 $.getJSON('table.json',function(data){

                    $('#mytable').empty(); 
                    var html = '';
                    html += '<tr class="tableheader"><th>Name</th><th>Code</th><th>Value</th><th>Bid</th><th>Offer</th></tr>';
                    for (var i=0, size=data.length; i<size;i++) {                           
                            html += '<tr class="tablecontent"><td class="name">'+ data[i].name+ '</td><td class="code">'+ data[i].code+ '</td><td class="value">'
                                         + data[i].value+ '</td><td class="bid">'
                                         +data[i].bid+'</td><td class="offer">'+data[i].offer+'</td></tr>';
                            }

            $('#mytable').append(html);
            tablerows('mytable');

        });
    });

jqueryを使用してjsonを使用してhtmlを作成しています。テーブルは適切に作成されています。現在、javascript を使用して、代替行を別の色にスタイリングしており、ヘッダーは別の色にする必要があります。これは私の最初の質問です。私のスクリプトの下を見てください：

function tablerows(id){
    if(document.getElementsByTagName){  
        var tableid = document.getElementById(id);  
        var rows = tableid.getElementById("tablecontent"); 
        for(i = 0; i < rows.length; i++){          
            if(i % 2 == 0){
                rows[i].className = "rowevencolor";
            }else{
                rows[i].className = "rowoddcolor";
            }      
        }
    }
}

$(document).ready(function() {
                 $.getJSON('table.json',function(data){

                    $('#mytable').empty(); 
                    var html = '';
                    html += '<tr class="tableheader"><th>Name</th><th>Code</th><th>Value</th><th>Bid</th><th>Offer</th></tr>';
                    for (var i=0, size=data.length; i<size;i++) {                           
                            html += '<tr id="tablecontent"><td class="name">'+ data[i].name+ '</td><td class="code">'+ data[i].code+ '</td><td class="value">'
                                         + data[i].value+ '</td><td class="bid">'
                                         +data[i].bid+'</td><td class="offer">'+data[i].offer+'</td></tr>';
                            }

            $('#mytable').append(html);

        });

        $(function(){
            tablerows('mytable');
        });
    });

しかし、私の行はスタイルされていません。どこが問題なのか教えてください。

以下はcssコードでもあります：

.rowoddcolor{
    background-color:#FFFFFF;
}
.rowevencolor{
    background-color:#D3D3D3;
}
4

3 に答える 3

1

いくつかのこと：

まず、要素IDは一意である必要があります。trすべてに同じIDを与えないでくださいtablecontent。

それが修正された後、ヘルパー関数全体tablerows()が冗長であり、そのロジックをテーブルを作成している場所に移動できるため、ヘルパー関数全体を破棄できます。

for (var i=0, size=data.length; i<size;i++) {                           
    html += '<tr class="tablecontent row' + (i % 2 ? 'even' : 'odd') + 'color"><td class="name">'+ data[i].name+ '</td><td class="code">'+ data[i].code+ '</td><td class="value">'
         + data[i].value+ '</td><td class="bid">'
         + data[i].bid+'</td><td class="offer">'+data[i].offer+'</td></tr>';
}

または、Kundanが推奨するように、CSSで疑似セレクターを使用するだけです。

于 2012-11-12T05:34:24.623 に答える
1

テーブルの構築前に関数「tablerows」が実行されていると思います。したがって、append メソッドの後にそのコードを配置します。

例 ：

$(document).ready(function() {
    $.getJSON('table.json',function(data){
        // existing stuff
        $('#mytable').append(html);
        tablerows('mytable');
    });
});

また、交互に色クラスを追加する最も簡単な方法は次のとおりです。

$('#mytable tr:even').addClass("rowevencolor");
$('#mytable tr:odd').addClass("rowoddcolor");
于 2012-11-12T05:30:31.883 に答える
0

コードがテーブルの行 #3 を強調表示していない理由は、の結果がArray ではなく NodeList でgetElementsByClassNameあるためです。

したがって、ランダム アクセスにインデックス演算子を使用する前に、NodeList を配列に変換する必要があります。

例えば

    var rowsList = tableid.getElementsByClassName('tablecontent');
    var rows = Array.prototype.slice.call(rowsList);
    for (i = 0; i < rows.length; i++) 
       // ...

これが実用的なフィドルです

ただし、Kundan の回答によると、jQuery ソリューションを使用しない理由は、作業がはるかに少ないため、奇妙に思えます。ここでjQueryフィドル

于 2012-11-12T06:21:12.330 に答える