特定の条件が満たされたときに、データテーブルは行の色を設定します

Question

テーブルの各行には「id」という属性があります。

私は「ID」どのように私は動的にid値に基づいて行に赤色の背景を追加することができます8.

var selectedId = 8; 

table.rows().every(function (rowIdx, tableLoop, rowLoop) {    
    if (this.data().id == selectedId) { 
     $(table.row(rowIdx).node()).css('background-color', 'red'); // <- does not work     
     $(table.row(rowIdx).node()).addClass("redBackgroundClass"); // <-does not work 
    }  
}); 

での行の赤い背景を持っているしたいですか？

実際に

に注意してください、私は上記のコードを削減しました：おそらくこれを行う最も簡単な方法は、背景色を含んでいるCSSクラスを設定することです

var node =$(table.row(0).node()); 
console.log(node); // <-- ok, console prints "<tr>" 
node.css("background-color","red"); // <- does not work 

Answer 1

赤であれば、dataTableをロードした後、IDが8の行にそのクラスを割り当てます。

$(document).ready(function() { 
    $('#example').DataTable({ 
     //Other setup/config options go here 
     rowCallback: function(row, data){ 
      if(data["id"] == 8){ //I'm assuming you're using object JSON/ajax, if not, 
           //you'll have to find where in the data[] object the id is 
       $(row).addClass("redBackgroundClass"); 
       //Or alternatively: 
       //$(row).css("background-color","red"); if you don't want to make a css class 
     } 
    }); 
}); 

の rowCallbackオプションでこれを行うことができます

このコードブロックでは、適切な背景属性を持つ "redBackgroundClass"という名前のCSSクラスがある限り、IDが8の行はすべて赤い背景になります。

編集： @ Carlのコメントによれば、実際には別のCSSクラスを持つ必要はありません。必要に応じて行のCSS背景色を設定できます。私は両方のコードに含まれています。

編集2：あなたはアクセス/何らかの理由でのDataTableの初期化を変更することができない場合は、ここでそれを行うための別の方法は次のとおりです。

var table = $('#example').DataTable(); //You don't have this line, but just note the name 
             //'table' is the name of the DataTable object 

var row = table 
    .row('8') //This assumes that the official DT row index is named "8", if instead you 
    .node(); //want the actual 8th row, just remove the ' marks and use row(8) 

$(row).css("background-color","red"); 

編集3：あなたがいることを正しく指摘してきましたこのコードはあなたの例と同じですが、例の前にifステートメントがある点で違いがあることに注意してください。私はDataTablesのドキュメントでその例を得ているので、その構文は正しい。私はあなたの問題は、文が真であると評価されないか、またはdata()のIDがどこにあるのか誤解されているかのいずれかでなければならないと思います。ステップバイステップを試して、それらの値が期待どおりであることを確認できるかどうかを確認してください。

Answer 2

答えが見つかりました。 trの中のtdを繰り返してスタイルを設定する必要がありました。

var node = $(table.row(8).node()); 
node.find('td').each (function(index, value) { 
    $(value).css("background-color","#AA0000"); 
    //$(value).addClass("redBGClass"); // this also works 
});