javascript - 内容に応じてテーブルをスタイリングする

Question

次の表があります: http://jsfiddle.net/UfhVc/1/

私は。。をしようとしています：

1. 同じ ID を持つすべての行で同じスタイルを取得します
2. 同じ ID を持つ行のそれぞれの違いを強調表示します。

しかし、今のところ、ステップ1に必要なロジックを理解できないようです)。jQuery を使用しても問題ありませんが、単純な js を使用する方が簡単であることがわかりました。

また、コードのこの部分で警告が表示されます。

table.rows[i+1].cells[0].innerHTML

Answer 1

このような？

var newColor = "#F1D0F2";
var diffColor = "#CECECE";

$('#tbl tr:gt(0)').each(function () { //Loop through the trs leaving out the header

    var txt = $(this).find('td:eq(0)').text(); //get the text of the id column
    var $this = $(this);

    var matchingRows = $('#tbl tr').not(this).filter(function () { //get the matching rows whose id colum value is same
        return $(this).find('td:eq(0)').text() == txt; 
    }).css('background-color', newColor); //apply css for match

    matchingRows.find('td').css('background-color', function (i) { //apply background color
        if ($this.find('td:eq(' + i + ')').text() != this.innerHTML) return diffColor; // to the tds of matching rows but column valud differ.
    });
});

フィドル

参考文献:

• :gt()
• フィルター（）
• css()
• :eq()

編集

あなたのコメントに基づいて、ここに更新があります：

var allColors = ["#333333","#990099", "#1295A6", "#FFFF99"]; //Set up the colors in to an array
var diffColor = "#CECECE";

$('#tbl tr:gt(0)').each(function () {

    var txt = $(this).find('td:eq(0)').text();
    var $this = $(this);

     if($this.is('.transformed')) //check for class transformed is present if so this has already been processed skip it.
        return;

    //Get the matching rows whose id column value is same     
    var matchingRows = $('#tbl tr').filter(function () {
        return $(this).find('td:eq(0)').text() == txt;
    }).css('background-color', allColors.shift()).addClass('transformed'); //Set the color and add a class to avoid latter processing

    matchingRows.find('td').css('background-color', function (i) { //apply background color
        var $parTd = $this.find('td:eq(' +  $(this).index() + ')');
        if ($.trim($parTd.text()) != $.trim(this.innerHTML)) // to the tds of matching rows but column value differ.
        {
            $parTd.css('background-color', diffColor);
            return diffColor;
        }
    });

});

フィドル