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

时间:2022-08-26 21:31:26

I have a table and I need to bold it I do not know how I can make it . for example just like the code from week marking The problem is, because time is always is different .The my problem because I do not know how to do it

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

Here is the table that I need to edit

这是我需要编辑的表

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>

1 个解决方案

#1


0  

You can use jQuery to iterate over the TD and add a class to bold the ones you want bold. Here is an example making use of jQuery but it is straight forward to do the same thing without jQuery (just a little more work):

您可以使用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/

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

To set the TD bold for the current hour, you could do this:

要为当前小时设置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/

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

Note that it is the current hour on the user's computer. If they are in a different time zone, there will be issues. So it becomes more complicated at that point.

请注意,它是用户计算机上的当前小时。如果他们处于不同的时区,则会出现问题。所以在那一点上变得更加复杂。

#1


0  

You can use jQuery to iterate over the TD and add a class to bold the ones you want bold. Here is an example making use of jQuery but it is straight forward to do the same thing without jQuery (just a little more work):

您可以使用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/

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

To set the TD bold for the current hour, you could do this:

要为当前小时设置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/

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

Note that it is the current hour on the user's computer. If they are in a different time zone, there will be issues. So it becomes more complicated at that point.

请注意,它是用户计算机上的当前小时。如果他们处于不同的时区,则会出现问题。所以在那一点上变得更加复杂。