best method for styling table cells to change color when checkbox is checked

I want to design an HTML table that will showcase a color-coded broadcast schedule featuring various types of programs. For instance, on Monday at noon, we might air something in the "sports" category. The table will span 7 days horizontally and have 1 row per hour of the day. Any empty cells will remain white.

Since I'll be manually coding the table, I can utilize CSS to differentiate the table cells by category. This could be something like a High School Football Game.

Beneath the table, I plan to present the categories along with checkboxes next to them. When a user selects a checkbox, I want all cells coded with that class in the table to highlight - changing from their default non-highlighted color to a brighter shade. For example, a pale yellow might become a vibrant yellow.

The basic HTML structure would resemble this:

<table border=1>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
</tr>

<tr>
<td>11am</td>
<td></td>
<td></td>
</tr>

<td>12 noon</td>
<td>High School Football game</td>
<td></td>
</tr>

<td>1pm</td>
<td></td>
<td></td>
</tr>
</table>
<form>
<input type="checkbox">Sports</input>
</form>

Answer №1

I have created a JSFiddle for you to use as a starting point. In the code, I assigned the name sports to the checkbox, applied a class sports to the <td>, and included a class .active with a background color using jQuery.

$("input[name='sports']").on("click", function () {
 $(".sports").toggleClass("active");
});

This code toggles the class active with each click. You can enhance it by checking the input's checked state instead of simply changing on every click event.

For more information, check out: http://api.jquery.com/toggleclass/

Answer №2

To emphasize certain elements in a table, it is recommended to add a flag to highlight them. This can be achieved using a custom attribute or applying a specific class.

<td data-type="sports" >High School Football game</td>
<input type="checkbox">Sports</input>

$('input[type="checkbox"]').click(function () {
    if ($(this)[0].checked)
    {
        $("[data-type='"+ $(this).val() +"']).addClass("yellowhighlight");
    }
    else
    {
        $("[data-type='"+ $(this).val() +"']).removeClass("yellowhighlight");

    }

});

Here's the CSS for the highlighting effect:

.yellowhighlight
{
    border:2px solid yellow;
}

Please note that this code snippet has not been tested, but it should give you an idea of how to implement the desired functionality.

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

"Error encountered: JSON trace not valid when making a jQuery AJAX request

$.ajax({ type: 'POST', headers: { "cache-control": "no-cache" }, url: '/Service.asmx/ProcessRequest', async: true, cache: false, data: 'controller=cart&add=1&ajax=true&qty ...

An Iframe lacks the ability to showcase HTML content, unlike a browser which is capable of doing

I'm struggling to get my Iframe to show the html string properly. Here's the content of the string: var='<BODY style="MARGIN: 0px" bgColor=#ffffff marginwidth="0" marginheight="0"> <SCRIPT language=JavaScript> var Caller_User_Ty ...

Creating a button that can automatically scroll to a specific table row

I have implemented code that fetches data from my database and displays it in a table format. The code snippet is shown below: <body> <?php include('navbar.php'); ?> <div class="container"> <h1 class="page-header text-ce ...

Problem with colors in Jvectormap version 1.2.2

I'm currently working with the most recent version of Jvectormap (1.2.2) and I'm having trouble locating any examples for changing all country colors. In previous versions, it was as simple as setting the color property, but it seems like this fe ...

Having difficulty refreshing metadata on the client side within Next.js through client-side data retrieval

Having some trouble with updating metadata using NextSeo when fetching data on the client side. useEffect(()=>{ fetch(assetURL) .then((res) => res.json()) .then((data) => { console.log(data); }) .catch((error) => { console.err ...

Guide to dynamically swapping one SVG icon with another SVG icon using AngularJS

In my current setup, I am working with a dedicated framework that requires me to specify the path to an svg icon like so: <sit-command-bar sit-type="action" sit-layout="vertical"> <sit-command svg-icon="common/ ...

Troubleshooting issue with C# Ajax success response not triggering alert

I am facing an issue where the alert box for success does not show even though the code successfully inserts contact details using ajax and C#. Strangely, when I debug through the JavaScript debugger in Chrome, the alert pops up as expected. Here is the co ...

Presenting a trio of distinct tables each accompanied by its own unique button option

I am attempting to create a functionality where there are 3 buttons and when a user clicks on one of them, it shows the corresponding table while hiding the other two. I have experimented with using getElementById to manipulate the display property of the ...

Experiencing difficulty retrieving text using Selenium WebDriver in Python

I am using Selenium WebDriver to extract text from a specific box on this website. Check out my code below: from os import system from selenium import webdriver driver = webdriver.Chrome("./chromedriver") driver.get("http://www.lutanho.ne ...

Unable to access functions from an external JavaScript file that is being utilized by the HTML file

Having an index.html file: <head> <title>JavaScript Fun</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head> <body> <p> ...

How can I display an Open View within a Bootstrap modal in an ASP.NET MVC application?

<div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-url='@Url.Action("Register","Account")'> <div class="modal-dialog"> <div class="modal-content"> ...

Use a forEach loop to transfer the content of one tag to another tag

EDIT: I'm confused as to why this was labeled as a duplicate when the previous question did not address my specific issue. Yes, it involves using querySelector, but how can I achieve this using forEach? Please help me revise this. I am attempting to ...

Create sleek and custom forms with AngularJS and JQuery

As a core C++ developer, I have recently expanded my skills to include Scala, Lift, and AngularJS. My latest project involves developing an application similar to . There is a high possibility of needing to modify existing features or introduce new ones t ...

Moving divs to a separate line in mobile display

I currently have a basic image-thumbnails landing page set up like this: <div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div> <div style="display: inline-block;"><i ...

Angular's interactive dropdown menus

Currently, I am diving into Angular and working on implementing dynamic select boxes in jQuery to prompt the user for the number of children. These select boxes adapt according to the selection made, subsequently asking for the ages of the children. While ...

Building dynamic web applications using jQuery's AJAX capabilities in CakePHP 1.3

My lack of experience with JS/jQuery is going to make this a learning process for me, so I apologize in advance for any silly questions I may ask :) I run an interactive fiction platform where users can submit their own story chapters. One issue I encount ...

Unexpected Mouseover/Mouseenter event triggered beyond the boundaries of the target element

Is there a simple way in jQuery to activate a mouseover/mouseleave event on an element with an additional 20px border on both sides? For example, I have some next/previous buttons that are displayed outside of the website container using #slider .prev{po ...

Tips for accessing data from dynamically named inputs within an ng-repeat loop

My objective is to facilitate the process of transferring data from one table row to another. https://i.sstatic.net/2XjSG.png If the information from 2015 remains unchanged in 2016, users should have an efficient method for copying these values into the c ...

Populating datatable with data using AJAX upon button click

Utilizing datatables to populate a table by clicking on elements within D3 charts, the code below initializes the table: $(document).ready(function () { Table = $('#data-table').DataTable({ data: [], "columns": [ ...

Tips for maintaining consistent webpage layout across various screen sizes

Although this method may seem outdated, I have always been intrigued by how it was accomplished. In the past, before websites became responsive, pages would simply shrink down to fit on mobile devices without adjusting their appearance. How was this achie ...