Question

我的桌子上有很多日期

示例：

<table>

<tr>
<td>23/12/2018</td>
</tr>

<tr>
<td>21/12/2018</td>
</tr>


</table>

现在，如果td值=当天和之前（取决于当天的日期），我想将<tr>背景设置为红色

示例：如果值= 2018年12月21日，tr背景=红色。

Answer 1

一种方法是像这样通过td遍历每个表document.querySelectorAll()：

document.querySelectorAll('table td').forEach(function(td) {
    ...
})

对于每个迭代的td，提取该td的innerText，将其解析为Date()对象：

 var dateParts = str.split('/');
 var date = new Date();

 date.setHours(0, 0, 0, 0);
 date.setDate(dateParts[0]);
 date.setMonth(dateParts[1]);
 date.setFullYear(dateParts[2]);

然后，如果解析日期早于当前日期，则将red的背景样式应用于当前td：

function getDateFromString(str) {

  var dateParts = str.split('/');
  var date = new Date();
  
  date.setHours(0, 0, 0, 0);
  date.setDate(dateParts[0]);
  date.setMonth(dateParts[1] - 1);
  date.setFullYear(dateParts[2]);
  
  return date;
}

// Query all table cells in document
document.querySelectorAll('table td').forEach(function(td) {
  
  // If date contained in td text before current date 
  // then apply red background style
  
  var today = new Date();
  today.setHours(0, 0, 0, 0);
  
  if( getDateFromString(td.innerText) <= today ) {
    
    td.style.background = 'red';
  }  
});

<table>
  <tr>
    <td>25/12/2018</td>
  </tr>      
  <tr>
    <td>23/12/2018</td>
  </tr>
  <tr>
    <td>21/12/2018</td>
  </tr>
</table>

Answer 2

您可以遍历td列，并使用javascript Date对象中的相应属性检查日期：

$(document).ready(function(){
  var _date = new Date();
  $('td').each(function(){
    var d = $(this).text().split('/');
    if (parseInt(d[0]) === _date.getDate() && parseInt(d[1]) === _date.getMonth()+1 && parseInt(d[2]) === _date.getFullYear()){
      $(this).css('background-color', 'red');
    }
  });
});

Answer 3

使用jquery，您可以使用td遍历每个.each()元素，然后可以在两个日期对象上使用td比较今天的日期和.setHours的日期。

请参见下面的工作示例（阅读代码注释以获取进一步的解释）：

const today = new Date(); // Get today's date
$('table tr td').each(function() {
  let dateData = $(this).text().split('/'); // get the components of today's date
  let tdDate = new Date(+dateData[2], dateData[1] - 1, +dateData[0]); // reate a date object from your string in the td element

  if(tdDate.setHours(0, 0, 0, 0) == today.setHours(0, 0, 0, 0)) { // compare the two dates
    $(this).css({"background": "red"}); // change the color of the element if it matches
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>

  <tr>
    <td>23/12/2018</td>
  </tr>

  <tr>
    <td>21/12/2018</td>
  </tr>
</table>

如果日期过期，则使用javascript更改背景

3 个答案: