0

配列から特定の条件をチェックした後、td を色分けしようとしています。この作品を除いて、すべて正常に動作します。これが私が持っているものです

<table border="0" cellpadding="0" cellspacing="0">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Profession</th>
    <th>Code</th>
</table>

var html = "";

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="colorType"></td><tr>';

    if (this.type === 'red') {
        $('.colorType').css('background', 'red')
    }
    else if (this.type === 'blue') {
        $('.colorType').css('background', 'blue')
    } else {
        $('.colorType').css('background', 'white')
    }
});

$('table').append(html);

ここに私のフィドルがあります http://jsfiddle.net/sghoush1/J2ssK/9/

4

4 に答える 4

3

これはどう？

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';    
    html += '<td style="background-color:' + this.type + '"></td><tr>';
});

更新されたフィドル

あなたの問題は、domに追加される前.colorTypeに dom 要素を参照していたことです。

于 2013-09-27T02:08:33.010 に答える
1

これはif()、html がテーブルに追加される前に色に関するステートメントが実行されているため、色を変更しようとしているときに要素が存在しないためです。

代わりに、次のようにループ内にインラインでスタイルを追加できます。

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="colorType" style="background:';

    if (this.type === 'red') {
       html += 'red';
    }
    else if (this.type === 'blue') {
       html += 'blue';
    } else {
       html += 'white';
    }
    html += ';"></td><tr>';
});

これが更新された jsFiddleです。

于 2013-09-27T02:05:46.847 に答える
1

呼び出す$(".colortype").css(...)と、DOM に既に存在するすべての一致する要素の背景が設定されます。作成中の HTML 文字列には何もしません。TD に適切なスタイルを与える何かを HTML に入れる必要があります。ここでは、さまざまなクラスを使用してさまざまな色の背景を表現しています。

この CSS を追加します。

.redBG {
    background-color: red;
}
.blueBG {
    background-color: blue;
}
.whiteBG {
    background-color: white;
}

JS を次のように変更します。

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="' + this.type +'BG"></td><tr>';
});

フィドル

于 2013-09-27T02:06:22.607 に答える
-1

append メソッドの後、jquery で「td」しか操作できないため、コードは機能しません

だからこれを試してください：

$.each(arrayTest, function (i) {
    html = ""; //clean up the variable
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="colorType_'+i+'"></td><tr>'; //put the i count, because the class cannot be duplicated

    $('table').append(html);

    if (this.type === 'red') {
        $('.colorType'+i ).css('background', 'red')
    }
    else if (this.type === 'blue') {
        $('.colorType'+i ).css('background', 'blue')
    } else {
        $('.colorType'+i ).css('background', 'white')
    }
});
于 2013-09-27T02:10:12.200 に答える