Question

我正在验证表格中的每个单元格，如果出现错误，希望将单元格涂成红色。这是我尝试过的（控制台上没有错误，返回错误时单元格也不是红色的）：

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

Answer 1

阅读moment.js文档，了解严格解析：

从2.3.0版开始，您可以为最后一个参数指定布尔值，以使Moment使用严格解析。严格的解析要求格式和输入完全匹配，包括分度符。

1 = abcd + abcD + aBCD = a (bcd + bcD + BCD) = a (bc + BCD) = a (bcd + D (b ^C))
  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内寻找TD，而不是您想要的。

另外，使用$('td', this)和<tbody>作为选择器（跳过thead的TR）

此外，不要这样做

'tbody'

您可以轻松做到：

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

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

1 个答案: