javascript with emphasis on table

My friend shared a JavaScript code with me where he only bolded the time but not the text next to it. I am looking to bold both the time and the text next to it, as well as multiple tables if possible.

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

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

Answer №1

To apply the class to the tr, you can use the following code:

let currentHour = new Date().getHours() + 1;

$('table td:nth-child(1)').each(function (index, td) {
    if ($(td).text().indexOf(currentHour) === 0) {
        $(this).closest('tr').addClass('highlighted');
        // ^^^^^^^^^^^^^^^^^^^^
    } else {
        $(this).closest('tr').removeClass('highlighted');
        // ^^^^^^^^^^^^^^^^^^^^
    }
});

Check out the demonstration here: http://jsfiddle.net/exampleusername/abcdef123/

UPDATE

An alternative method using toggleClass:

$('table td:nth-child(1)').each(function (index, td) {
    $(this).closest('tr').toggleClass('highlighted', ($(td).text().indexOf(currentHour) == 0));
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The hover effect does not seem to be functioning properly within the <th>

I've been working on a tooltip feature that displays data in a message box when hovering over an icon based on its attribute. The following code is implemented for the mouseenter event. <span class='csTip fa fa-info-circle' csTipTerm=&a ...

Guide to invoking a server-side function through JSON data?

Here is the code I am working on: <script type="text/JavaScript> var myarray = new array(); function getsvg1() { $.ajax({ alert("hello"); type: "post", url: "WebForm1.aspx/getsvg1", ...

Styling the Menu Item with CSS

A graphic designer provided me with these elements to incorporate into the HTML design. Everything was going smoothly until I encountered the faint, uneven borders on the LI tags, especially when dealing with a list containing only five items. If anyone ...

Rails: How come my personalized stylesheet isn't taking priority over the font family?

I have included the Skeleton boilerplate css in my application from this source. It can be found within the directory app/assets/stylesheets. app/assets/stylesheets ├── application.css ├── custom.scss ├── normalize.css └── skeleton ...

Developing gaps or margins among table components

Struggling to create spacing between text and an image in an HTML email, but the image just won't budge no matter what I do. Check out my Fiddle here: https://jsfiddle.net/rwcgs0g8/ All I want is for the red "Download your free" image to shift down ...

Ensure that domain names entered into a form are validated using jQuery and any leading characters

I'm working on a form with text inputs and using jQuery to validate domain names. The goal is to remove the "www." prefix if it exists in the entry. Everything works fine for the first domain, but subsequent entries don't get trimmed correctly. F ...

Attempting to iterate through a Query each loop for the Raphael object

I'm currently facing a challenge with creating a jQuery .each() function to iterate through an array that I've constructed from a Raphael object. While I am able to achieve this using a traditional JavaScript for-loop: for (var i = 0; i < reg ...

Managing mouse click events in jQuery

Here on SO, I successfully implemented the mouse down handler. Now, my goal is to separate these functions into their own file named test.js. Within test.js, the code looks like this: function handleMouseDown(e) { console.log('handleMouseDown&ap ...

The Kendo Grid is refusing to show up within the popup window

I am new to using Angular 2 and Kendo UI. Currently, I am attempting to include a grid inside my pop-up window. While I have successfully displayed the pop-up, adding the grid has proven challenging. The grid is not appearing as expected ...

Achieving a smooth transition from a blur-out effect to a blur-in effect on a background Div

I created a blur in/out effect for my landing page, but it's not functioning as expected and I'm not sure why. It blurs out correctly, but the issue arises when I want the underlying Div to fade in. Currently, it just appears abruptly after the ...

The function of jQuery's .prop('defaultSelected') appears to be unreliable when used in Internet Explorer 9

Below is the code I am currently using: $selects = $('select'); $selects.val( $selects.prop('defaultSelected')); The purpose of this code is to reset the values of all select elements on my webpage. However, I am facing an issue in IE ...

"Troubleshooting: My PHP script is not displaying CKEditor content stored in the database as HTML –

As I work on the blog section of a project, I encountered an issue with displaying HTML content saved from CKEditor in PHP. Instead of rendering the HTML tags, it shows plain text. I have attempted various solutions but haven't been able to fix the pr ...

Utilizing "this" in a situation where the function and selector are not combined

When it comes to utilizing this in different scenarios, the results may vary. In example 1, we see that by directly accessing this, we are able to obtain the correct result. $("#my_div").on("click", function () { alert( $(this).attr("id") ) }); Howev ...

Adjusting the appearance of Google charts

Is there a way to eliminate the label for the area chart located at the top right corner? ...

Achieving horizontal alignment for divs in CSS can be challenging

Struggling to align three circular divs on my webpage, here's the code: <div class="row"> <div class="large-9 push-2 columns"> <div class="green"></div> <a href="#">Donnez</a> </div> <div cl ...

What could be causing the target to malfunction in this situation?

Initially, I create an index page with frames named after popular websites such as NASA, Google, YouTube, etc. Then, on the search page, <input id="main_category_lan1" value="test" /> <a href="javascript:void(0)" onmouseover=" window.open ...

Choosing a Google Form dropdown option using Selenium in Python without the select tag specifically

I've been attempting to choose a dropdown option from a Google Form using Selenium and Python, but I haven't had any luck so far. I've tried various methods, including using the Select class (which doesn't work because the dropdown for ...

Understanding Json data using Jquery

I am currently learning about Jquery, Ajax, and JSON but I am having difficulty with parsing Json data. Despite researching extensively on stackoverflow Parsing JSON objects for HTML table Access / process (nested) objects, arrays or JSON Parse JSON in ...

Strategies for implementing a minimum height for grid-template-column containers

Here's an issue I'm facing: when the first container has content, the other two containers without content end up being the same height as the first one: Check out this JSFiddle link for reference .grid { padding: 5 ...

Display HTML components as JSON data using AngularJS

Recently, I started exploring angular js and faced a challenge in formatting json data with the help of angular js. Below is a snippet of my json data: [ {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"}, {"field ...