javascript - 如何通过 javascript 为我的表创建自动标记

标签 javascript html wordpress

我有一张 table ,我需要将其加粗,但我不知道如何制作它。 例如,就像周标记中的代码一样 问题是,因为时间总是不同的。我的问题是因为我不知道该怎么做

这是我需要编辑的表格

var days = 'sunday,monday,tuesday,wednesday,thursday,friday,saturday'.split(',');

document.getElementById( days[(new Date()).getDay()] ).className = 'bold';
.bold {
    font-weight:bold;
}
The example is how it will work

<!-- begin snippet: js hide: false -->

var currentDate = new Date();
var currentHour = currentDate.getHours();
var currentMinute = currentDate.getMinutes();
var minuteBin = currentMinute - (currentMinute % 15);
var idString = ""+currentHour+minuteBin;

console.log("Time =",currentHour,":",currentMinute,"bin =",minuteBin,"idString =",idString);

document.getElementById(idString).className = 'bold';
.bold {
    font-weight:bold;
}
<table>
    <tr id="2115">
        <td>21:45</td>
        <td>A</td>
    </tr>
    <tr id="2130">
        <td>22:00</td>
        <td>B</td>
    </tr>
    <tr id="2145">
        <td>22:15</td>
        <td>C</td>
    </tr>
</table>

最佳答案

您可以使用 jQuery 迭代 TD 并添加一个类来加粗您想要加粗的内容。这是一个使用 jQuery 的示例,但无需 jQuery 也可以直接完成相同的操作(只需多做一点工作):

var time = '18:55';

$('table td:nth-child(1)').each(function(index, td) {
    if ($(td).text() === time) {
        $(td).addClass('highlight-time');
    } else {
        $(td).removeClass('highlight-time');
    }
});

JSFiddle:http://jsfiddle.net/sah27uo6/2/

要设置当前时间的 TD 粗体,您可以执行以下操作:

var hour = new Date().getHours();

$('table td:nth-child(1)').each(function(index, td) {
    if ($(td).text().indexOf(hour) == 0) {
        $(td).addClass('highlight-time');
    } else {
        $(td).removeClass('highlight-time');
    }
});

JSFiddle:http://jsfiddle.net/sah27uo6/3/

请注意,这是用户计算机上的当前时间。如果他们位于不同的时区,就会出现问题。所以到那时事情就变得更加复杂。

关于javascript - 如何通过 javascript 为我的表创建自动标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30716383/

相关文章:

Javascript:document.getElementById() 返回 NULL

javascript - Amcharts v3 XY 不适用于对数刻度

javascript - Express.js 处理不匹配的路由

PHP 计算从今天起的 Google 调查选择加入代码的天数

javascript - 将 sql 对象转换为 node.js 中的有效 Json 字符串 - Azure

html - w3css 单元格行重叠

html - 具有相同名称但基于类的不同结果的 Sass 变量?

html - 对齐底部 flexbox

css - 当我点击一个链接时,如何使这个菜单在 Wordpress 上消失?

php - 在不创建新表的情况下为 WordPress 插件存储变量