如何从 <td> 元素执行值答案

【问题标题】：How to execute value from <td> element如何从 <td> 元素执行值
【发布时间】：2019-01-16 23:17:54
【问题描述】：

我不熟悉js，你能给我一些提示吗？所以基本上我有动态生成的日历。我需要将当天标记为“红色”。您可以使用我的 codepen 了解更多详细信息。

当我尝试从这个表中执行值时，我得到的数组看起来像这样 ~> enter image description here.

https://codepen.io/david_jons/pen/aPXeaK

<div id="calendar-container">
  <div id="calendar-header">
      <span id="calendar-month-year"></span>
  </div>
      <div id="calendar-dates">
  </div>
</div>

JS：

window.onload = function(){
    var d = new Date();
    var month_name = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    var month = d.getMonth();
    var year = d.getFullYear();
    var first_date = month_name[month] + " " + 1 + " " + year;
    var tmp = new Date(first_date).toDateString();
    var first_day = tmp.substring(0, 3);
    var day_name = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    var day_no = day_name.indexOf(first_day);
    var days = new Date(year, month+1, 0).getDate();
    var calendar = get_calendar(day_no, days);

    document.getElementById("calendar-month-year").innerHTML = month_name[month]+" "+year;
    document.getElementById("calendar-dates").appendChild(calendar);

    var tr = document.getElementById("calendar-dates");
    var tds = tr.getElementsByTagName("td");
    var current_date = d.getDate();
}

function get_calendar(day_no, days){
    var table = document.createElement('table');
    var tr = document.createElement('tr');

    //row for the day letters
    for(var c=0; c<=6; c++){
        var li = document.createElement('li');
        li.innerHTML = "SMTWTFS"[c];
        tr.appendChild(li);
    }
    table.appendChild(tr);

    //create 2nd row
    tr = document.createElement('tr');
    var c;
    for(c=0; c<=6; c++){
        if(c == day_no){
            break;
        }
        var td = document.createElement('td');
        td.innerHTML = "";
        tr.appendChild(td);
    }

    var count = 1;
    for(; c<=6; c++){
        var td = document.createElement('td');
        td.innerHTML = count;
        count++;
        tr.appendChild(td);
    }
    table.appendChild(tr);

    //rest of the date rows
    for(var r=3; r<=7; r++){
        tr = document.createElement('tr');
        for(var c=0; c<=6; c++){
            if(count > days){
                table.appendChild(tr);
                return table;
            }
            var td = document.createElement('td');
            td.innerHTML = count;
            count++;
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    return table;
}

【问题讨论】：

标签： javascript arrays html-table calendar

【解决方案1】：

您可以使用Array.prototype.filter 以 HTML 集合作为上下文来迭代 HTML 集合。

下面的 sn-p 可能会有所帮助：

var cells = document.getElementById("calendar-dates").getElementsByTagName("td");
var current_date = d.getDate();
var matchingElement = Array.prototype.filter.call(cells, function(cell) {
  return +current_date === +cell.textContent;
})[0];
matchingElement.style.backgroundColor = 'red';

【讨论】：

感谢您的回复，这个解决方案非常适合我。
@ViachMoz 我的荣幸！
只是想指出它只会检查日期是否匹配。因此，如果是 2 月 2 日，它将突出显示 3 月 2 日。
@karoluS 如果我将它与自定义日期一起使用，您的变体将无法正常工作。仅适用于当前年份和月份。

【解决方案2】：

基本上，您必须检查您粘贴的当前日期日期是否与今天相同 (new Date())。

function isToday(day, month, year){
  const today = new Date();
  return today.getDate() === day && today.getMonth() === month &&     today.getFullYear()===year;
}

https://codepen.io/kwiniarski97/pen/magPKV?editors=1111

可以通过其他方式完成，这只是一个

【讨论】：