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

jQuery根据几个行单元格突出显示行

2 个答案: