Question

此功能在接下来的7天内创建表格，我想要实现的是始终突出显示当周的当天。任何想法如何检查表格内容应用css ..？这是一个小提琴：https://jsfiddle.net/xzgr9hf3/1/

本周应该代表整个星期，从星期一到星期日，所以明天我希望 星期二为黄色

像这样：（但经过某种检查） $（＆＃34; td：contains（＆＃39; Mon Oct 23＆＃39;）＆＃34;）。css（＆＃34; background-color＆＃34;，＆＃34; yellow＆＃34;）;

Date.prototype.addDays = function(days) { var dat = new Date(this.valueOf()) dat.setDate(dat.getDate() + days); return dat; } function getDates(startDate, stopDate) { var dateArray = new Array(); var currentDate = startDate; while (currentDate <= stopDate) { dateArray.push(currentDate) currentDate = currentDate.addDays(1); } return dateArray; } var dateArray = getDates(new Date(), (new Date()).addDays(6)); var row = document.createElement("tr"); dateArray.forEach(function(item) { var cell = document.createElement("td"); cell.textContent = item; row.appendChild(cell); }); $('#table').append(row); var todaysDate = new Date(); <div id="table"></div>

Answer 1

考虑到您总是在接下来的7天内打印，当天将始终是第一个元素，所以您只需要这个指令：

$("td").first().css("background", "yellow");

我们走了：

＆＃13;

 Date.prototype.addDays = function(days) {
        var dat = new Date(this.valueOf())
        dat.setDate(dat.getDate() + days);
        return dat;

    }

    function getDates(startDate, stopDate) {
        var dateArray = new Array();
        var currentDate = startDate;
        while (currentDate <= stopDate) {
            dateArray.push(currentDate)
            currentDate = currentDate.addDays(1);
        }
        return dateArray;
    }

    var dateArray = getDates(new Date(), (new Date()).addDays(6));

    var row = document.createElement("tr");
    dateArray.forEach(function(item) {
        var cell = document.createElement("td");
        cell.textContent = item;
        row.appendChild(cell);
    });
    $('table').append(row);

    var todaysDate = new Date();
    
    $("td").first().css("background", "yellow");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table></table>

＆＃13;

Answer 2

由于您的第一个元素总是当前日期，您可以：

dateArray.forEach(function(item, index) {
    var cell = document.createElement("td");
    if (index === 0) {
        cell.style = "font-weight: bold;"
    }
    cell.textContent = item;
    row.appendChild(cell);
});

Answer 3

获取当前日期并将其与您的范围进行比较，以防您的范围从当天开始。

 Date.prototype.addDays = function(days) {
        var dat = new Date(this.valueOf())
        dat.setDate(dat.getDate() + days);
        return dat;

    }

    function getDates(startDate, stopDate) {
        var dateArray = new Array();
        var currentDate = startDate;
        while (currentDate <= stopDate) {
            dateArray.push(currentDate)
            currentDate = currentDate.addDays(1);
        }
        return dateArray;
    }

    var dateArray = getDates(new Date(), (new Date()).addDays(6));

    var row = document.createElement("tr");
    dateArray.forEach(function(item) {
        var cell = document.createElement("td");

        cell.textContent = item;

        row.appendChild(cell);

        var curdate = new Date().getFullYear() + "-" + new Date().getMonth() + 1 + "-" + new Date().getDate();
        curitem = item.getFullYear() + "-" + item.getMonth() + 1 + "-" + item.getDate();
          console.log(curitem);
        if(curitem == curdate ){

        $( cell ).css( "background-color", "yellow" );

        }
    });
    $('#table').append(row);

    var todaysDate = new Date();

Fiddle

Answer 4

因为实际日期是第一个元素，您可以选择#table

的第一个子元素

在追加后，你改变了td的颜色，但只改变了第一个元素，如下所示：

$('#table').append(row);
$('#table td:first-child').css({'color': 'red'});

Answer 5

表格中的循环将您的日期与今天的日期进行比较，并添加课程或风格。

var todaysDate = new Date();
 $('#table tr td').each(function(index, element) {
   if ($(this).text() === todaysDate.toString()) {
     $(this).css("background-color", 'red');;
   }

 });

Working Fiddle

Answer 6

您可以使用：

new Date().getDay(); // week day index => cell

没有JQUERY：

＆＃13;

Date.prototype.addDays = function(days) {
  var dat = new Date(this.valueOf())
  dat.setDate(dat.getDate() + days);
  return dat;
}

function getDates(startDate, stopDate) {
   var dateArray = new Array();
   var currentDate = startDate;
   while (currentDate <= stopDate) {
       dateArray.push(currentDate)
       currentDate = currentDate.addDays(1);
   }
   return dateArray;
}
   
 let table = document.getElementById('week')
   , dateArray = getDates(new Date(), (new Date()).addDays(6))
   , row = document.createElement("tr");
   
 dateArray.forEach(function(item) {
     var cell = document.createElement("td");
     cell.textContent = item;
     row.appendChild(cell);
 });
 table.appendChild(row);

 var todaysDate = new Date();

 // ------- HERE IS THE TRICK ---------       

 var curWeekDay = todaysDate.getDay();
 document
  .querySelectorAll('table#week td')[curWeekDay - 1]
  .style.backgroundColor = "yellow";

＆＃13;

<table id="week"></table>

＆＃13;

WITH JQUERY：

＆＃13;

Date.prototype.addDays = function(days) {
  var dat = new Date(this.valueOf())
  dat.setDate(dat.getDate() + days);
  return dat;
}

   function getDates(startDate, stopDate) {
       var dateArray = new Array();
       var currentDate = startDate;
       while (currentDate <= stopDate) {
           dateArray.push(currentDate)
           currentDate = currentDate.addDays(1);
       }
       return dateArray;
   }

   var dateArray = getDates(new Date(), (new Date()).addDays(6));

   var row = document.createElement("tr");
   dateArray.forEach(function(item) {
       var cell = document.createElement("td");
       cell.textContent = item;
       row.appendChild(cell);
   });
   $('table').append(row);


   var todaysDate = new Date();
   $("td:nth-child("+(todaysDate.getDay())+")").css("background", "yellow");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table></table>

＆＃13;

检查并突出显示表格中的当前日期

6 个答案: