строка выделения jQuery, основанная на нескольких ячейках ряда

Question

Я вижу много вопросов по подсветке на основе значения ячейки, но как бы я мог перебирать N-я ячейка строки N, а затем выделять строку?

В частности, я хочу, чтобы проверить, если клетки 2 до 4 пустуют и выделить строку, если они:

<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"); 
    } 
});