jQueryハイライト行はいくつかの行セルに基づいて

Question

セル値に基づいて強調表示に関する多くの質問がありますが、N番目からN番目の行セルをどのように循環させて行をハイライト表示するのですか？

具体的には、私は、細胞が4から2が空であり、彼らがしている場合は、行をハイライト表示しているかどうかを確認したい：

<table> 
    <tr> 
    <th>Col 1</th> 
    <th>Col 2</th> 
    <th>Col 3</th> 
    <th>Col 4</th> 
    </tr> 
    <tr> 
    <td>Row 1</td> 
    <td>Value 1</td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td>Row 2</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td>Row 3</td> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    <td>Value 2</td> 
    </tr> 
</table> 

擬似コード：私の例では

for each TR { 
    blankvariable = true 
    for each cell from 2 to 4 { 
     if not empty then blankvariable = false 
    } 
    if blankvariable = true then highlight row 
} 

、行2のようになります強調表示されます。

Answer 1

ループの現在のコンテキストからすべてのtdsを取得し、その親を呼び出してから、すべての列に対してループし、処理したい範囲のみをフィルタするだけです。ここで

は例です：

$(document).ready(function(){ 
    $('table tbody tr').each(function() 
    { 
    var $this = $(this); 
    var $columns = $this.find('td'); 
    blankvariable = true; 

    $columns.each(function(index){ 
     if(index > 0 && index <= 3) 
     { 
      if($(this).text() !== '') 
      { 
      blankvariable = false; 
      } 
     }    
    }); 

    if(blankvariable) 
    { 
     $this.css({ 
     backgroundColor: 'lightblue' 
     }); 
    } 
    }); 
}); 

私はあなたのテーブルにも行&列に関するいくつかの有用な情報を取得する方法を示す、あなたの擬似コード以下https://jsfiddle.net/7fLyhfwx/

Answer 2

単純なアプローチを働いて、それを実証するためのフィドルを作成しましたスペースとネストされたマークアップも考慮します。

// Get information about rows & columns 
var totalCells = $("table tr").children().length; 
var numHeaders = $("table th").length; 
var numRows = $("table tr").length; 
var numCells = totalCells - numHeaders; 
// We can also detect a potential issue 
// if totalCells div numHeaders doesn't match, some cells are spanned 

// Loop over rows 
$("table tr").each(function(index) { 
    // Filter for td will return 0 during the first row loop 
    var cols = $(this).children("td"), numCols = cols.length; 
    // Disallow check for header 
    var emptyRow = numCols > 0; 
    // Loop columns 
    for (var c = 0; c < numCols; c++) { 
    // Just check cells after the first will be enough 
    if (c > 0) { 
     var cell = cols[c]; 
     // Consider nested span's and &nbsp; 
     var content = $(cell).text().trim(); 
     if (content.length > 0) { 
     emptyRow = false; 
     // Don't need additional check anymore 
     break; 
     } 
    } 
    } 
    if (emptyRow) { 
    $(this).fadeIn("slow").css("background", "yellow"); 
    } 
});