jQuery基于多个行单元格高亮显示行

我看到了许多关于基于单元格值高亮显示的问题，但是如何循环第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>

---

在我的示例中，第2行将突出显示。

这非常简单，您需要做的就是从循环中的当前上下文中获取所有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'
       });
    } 
  });
});

$（文档）.ready（函数（）{
$（'table tbody tr'）。每个（函数（）
{
var$this=$（this）；
var$columns=$this.find（'td'）；
blankvariable=true；
$columns.each（函数（索引）{
如果（index>0&&index一种简单的方法遵循伪代码，演示如何获取有关表中行和列的有用信息，同时考虑空格和嵌套标记：

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

//获取有关行和列的信息
var totalCells=$（“表tr”）.children（）.length；
var numHeaders=$（“表th”）.长度；
var numRows=$（“表tr”）。长度；
var numCells=总单元格-numHeaders；
//我们还可以检测到潜在的问题
//如果totalCells div numHeaders不匹配，则会为某些单元格设置跨距
//绕行循环
$（“表tr”）。每个（函数（索引）{
//td过滤器在第一行循环期间将返回0
var cols=$（this.children（“td”），numCols=cols.length；
//不允许对标题进行检查
var emptyRow=numCols>0；
//循环列
对于（var c=0；c0）{
var单元=cols[c]；
/考虑嵌套跨度和
var content=$（cell.text（）.trim（）；
如果（content.length>0）{
emptyRow=假；
//不再需要额外的检查了
打破
}
}
}
如果（清空）{
$（this.fadeIn（“slow”）.css（“background”，“yellow”）；
}
});

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