Tips for enhancing a table cell using JavaScript

Is it possible to use javascript to style a specific cell in an HTML table?

A sample HTML table is provided below:

<table border="1" width="300" height="200">
        <tr>
            <td id="11"><</td>
            <td id="12"></td>
            <td id="13"></td>
            <td id="14"></td>
            <td id="15"></td>
            <td id="16"></td>
            <td id="17"></td>
            <td id="18"></td>
            <td id="19"></td>
            <td id="20"></td>
        </tr>
</table>
<style>
        table {
            border-collapse: collapse;
        }
        td {
            border: 1px solid grey;>
        }
    </style>

I am looking to dynamically change the color of cell with id 11 to black based on a condition

I have attempted to achieve this using JS, but so far no success

function bthClick(){
    let table = document.querySelectorAll('td id')
    table[11].style.color = 'dark'
}

Answer №1

If you need to access the cell with id 11, you can simply use

document.querySelector('td[id="11"]')
. Please keep in mind that using "dark" as a color value in CSS is not valid; it is recommended to use black instead.

function updateCellColor() {
  // Select the cell with id "11"
  let selectedCell = document.querySelector('td[id="11"]'); 
  
  // Update its background color to black and text color to white
  selectedCell.style.backgroundColor = 'black'; 
  selectedCell.style.color = 'white'; 
}
table {
    border-collapse: collapse;
    margin-top: 10px;
}
td {
    border: 1px solid grey;
}
<button onclick="updateCellColor()">Update Cell Style</button>

<table border="1" width="300" height="200">
        <tr>
            <td id="11">11</td>
            <td id="12">12</td>
            <td id="13">13</td>
            <td id="14">14</td>
            <td id="15">15</td>
            <td id="16">16</td>
            <td id="17">17</td>
            <td id="18">18</td>
            <td id="19">19</td>
            <td id="20">20</td>
        </tr>
</table>

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

boost the amount of responses received per second

I have developed an android game with a user base of 40,000 online users. Each user is sending a request to the server every 5 seconds. Below is the code I have written to test these requests: const express = require('express') const app = ex ...

Using JQuery to test for element visibility in Jest tests

I am currently facing an issue in my unit test where the visibility state of an element does not change as expected. I am using .is(":visible") to verify this, and while it works fine in browsers, the unit test always reports that the element is hidden. B ...

The way browsers handle CSS styling when multiple elements have the same ID

I've been thinking about how IDs are supposed to be unique in HTML documents, but often times that rule is not followed. I'm curious to know how browsers handle CSS applications when multiple elements share the same id. From my initial testing, ...

How can you extract path information from an SVG file and utilize it as a marker on Google Maps?

I want to implement a custom SVG icon as a marker on Google Maps. I have obtained this SVG file: <svg xmlns="http://www.w3.org/2000/svg" width="510px" height="510px" viewBox="0 0 510 510"> <g stroke="black" stroke-width="10" ...

Setting up a route for a WebSocket server in Express: a step-by-step guide

My setup is structured similarly to the following code: const WebSocketServer = require("ws").Server, express = require("express"), http = require("http"), app = express(), server = http.createServer(app); app.post("/login", login); app.g ...

Enhance your title bar with an eye-catching image

Is there a way to add an image to the title bar? I currently have the title set as "Webnet". I attempted to combine it with a FontAwesome Glyphicon's icon image like this: <title><i class="icon-user icon-black"></i>Webnet</titl ...

Ensuring Proper Image Size Validation in Angular 5

Currently, I am in the process of developing an Angular web application, and one of the functionalities involves photo uploads. I am looking to add validation for image size to detect if the uploaded image is too small and prompt errors accordingly. Belo ...

Troubleshooting a Label Overlapping Problem in Materialize CSS

I've been working on a Materialize project and encountering an issue with pre-filled values in text boxes. Here is a snapshot of the problem: https://i.stack.imgur.com/u13jT.png <div class="input-field col s12 m6"> <input class="" id="us ...

Using jQuery to smoothly animate a sliding box horizontally

Is there a way to smoothly slide a div left and right using jQuery animation? I have been trying to achieve this by implementing the code below, which can be found in this fiddle. The issue I am facing is that every time I click on the left or right butto ...

Unable to implement the `omega/theme.css` file within the angular.json configuration

"styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css", "node_modules/primeicons/primeicons.css", ...

Update all the key values in the JSON file to be empty strings

Looking for a solution to modify the values in a list of flat JSON key-value pairs by replacing them with empty strings. Below is an example of the JSON data: { "wl.label.accountPin": "Account PIN", "wl.label.logon": ...

Storing files or Blobs within Json data in Angular/Javascript

Is it possible to include a file inside a JSON when sending data through ajax? colors: [ {_id: "5bec42f02797800f447241d1", color: "#777", image: File(79666)}, {_id: "5bec8cf91fb21b3a2477d817", color: "#566", image: File(79666)} ] If not, what is the alt ...

Cover a cube with a material using Three.js

After following the tutorial on creating a Cube with a texture, I encountered an issue where the texture repeated on every face of the cube. I am seeking a solution to use a single texture that 'wraps' around the cube. Is there a way to achieve t ...

Has Next.js incorporated a maximum cache size feature along with an invalidation algorithm like LRU?

Currently, I have a Next.js site that utilizes getServerSideProps for data fetching. However, I am interested in switching to getStaticProps and implementing incremental static regeneration (ISR) for improved performance. Currently, my memory usage is ap ...

Email display issue: HTML content not rendering correctly

Utilizing nodemailer for sending a welcome email post registration, the email template is saved within a variable. var template = '</!DOCTYPE html><html><head><meta charset="utf-8"><meta http -equiv="X-UA-Compatible" conten ...

Validate that a string is a correct file name and path in Angular without using regular expressions

Currently, I am using regex to determine if a string is a valid file name and path. However, when the string length becomes longer, it ends up consuming a significant amount of CPU, resulting in browser performance issues. public static readonly INVALID_F ...

Access in-depth data by clicking on a map to get detailed information

Recently, I took on the challenge of managing a golf club website after the original creator had to step away. One urgent issue I need to address is fixing a malfunctioning flash animation that provides information about each hole on the course. My plan is ...

What is the best way to include query parameters in a redirect using the res.redirect function in node.js/express.js?

Trying to navigate users to a Google Authorization page within my application poses a challenge. In this scenario, utilizing any Google API modules is not an option. To achieve the redirection, I am aware that I can structure my res.redirect() function in ...

jQuery toggle functioning in one scenario, but failing in another

My experience with JS/Jquery is limited which might explain why I'm struggling with this. I am attempting to hide some text on a page and then make it visible again by clicking on a toggle link. The JavaScript code below is what I have been using. The ...

AJAX nesting with varying input speeds

So, this is the situation - during a job interview I was presented with an interesting AJAX question: The scenario involves code where the onChange function triggers an AJAX call to the 'asdf server', and then that call initiates another AJAX ca ...