代码之家 › 专栏 › 技术社区 › Glyn

如何设置表格中单元格的颜色

css jquery javascript

Glyn · 技术社区 · 7 年前

我正在验证表中的每个单元格,如果有错误,我想将单元格染成红色。这是我尝试过的(控制台上没有错误,返回错误时单元格没有红色):

css:

.redBg {background: red !important;}

javascript和jQuery:

//Return each element
var row = 0;
var column = 0;
$("#wrapper tr").each(function() {
  row++;
  column = 0;
  if (row > 1) {
    $('td', this).each(function() {
      column++;
      if (!$(this).text().replace(/\s/g, '').length) {
        alert("Row " + row + " column " + column + " only containes whitespace (i.e., empty, spaces, tabs or line breaks).");
      } else {
        if (column == 3) {
          var dateFormat = 'DD/MM/YYYY';
          if (!moment($(this).text(), dateFormat).isValid()) {
            alert("Row " + row + " DOB does not contain a valid date.");
            $('td', this).addClass('redBg');
          }
        }
        if (column == 4) {
          if (isNaN($(this).text())) {
            alert("Row " + row + " Scout Number must be numeric. " + $(this).text());
            $('td', this).addClass('redBg');
          }
        }
        if (column == 5) {
          var dateFormat = 'DD/MM/YYYY';
          if (!moment($(this).text(), dateFormat).isValid()) {
            alert("Row " + row + " Joining Date does not contain a valid date.");
            $('td', this).addClass('redBg');
          }
        }
      }
    })
  }
})

我也尝试过替换

$('td', this).addClass('redBg');

具有

$(this).find("td:nth-child(1)").css("background-color", red);

1 回复 | 直到 7 年前

Community Mohan Dere 6 年前

阅读 moment.js 关于 严格解析 :

从2.3.0版开始,您可以指定 最后一个参数是布尔值 利用时间 严格解析 .严格的解析要求格式和输入完全匹配,包括delimeters。

moment('It is 2012-05-25', 'YYYY-MM-DD').isValid(); // true
moment('It is 2012-05-25', 'YYYY-MM-DD', true).isValid(); // false
moment('2012-05-25', 'YYYY-MM-DD', true).isValid(); // true
moment('2012.05.25', 'YYYY-MM-DD', true).isValid(); // false

还有,什么时候 在…内 $('td', this).each( 功能,通过做 $('td', this) 只是在TD中寻找TD,而不是你想要的。

此外,使用 <tbody> 和 'tbody' 作为您的选择器(跳过thead的TR)

而且,与其做

if ( Boolean ) {
  if ( Boolean ) {
  }
}

你可以简单地做:

if(Boolean && Boolean) {
}

干得好:

var dateFormat = 'DD/MM/YYYY'; // You need this set only once

$("#wrapper tbody tr").each(function() {
  var row = $(this).index() + 1; // +1 since index is 0 based

  $('td', this).each(function() {
    var $col = $(this);
    var col = $col.index() + 1;
    var text = $.trim($col.text()); // GET TRIMMED TEXT
    var err = ""; // Empty error

    if (text.length === 0)
      err += `Row ${row} column ${col} only containes whitespace (i.e., empty, spaces, tabs or line breaks).\n`

    if (col === 3 && !moment(text, dateFormat, true).isValid())
      err += `Row ${row} DOB does not contain a valid date.`;

    if (col === 4 && isNaN(text))
      err += `Row ${row} Scout Number must be numeric. ${text}`;

    if (col === 5 && !moment(text, dateFormat, true).isValid())
      err += `Row ${row} Joining Date does not contain a valid date.`;

    if (err) {
      $(this).addClass('redBg');
      alert(err);
    }
  });

});

.redBg {
  background: red!important;
}

<table id="wrapper">
  <thead>
    <tr>
      <th>#</th>
      <th>?</th>
      <th>DOB</th>
      <th>Scout num.</th>
      <th>Joined</th>
    </tr>
  </thead>

  <tbody>
    <td>#1</td>
    <td>Joe</td>
    <td>3</td>
    <td>444</td>
    <td>5</td>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>