Using conditional logic to check if a column cell is empty

I need help writing a Javascript function that will loop through rows in a table and only change the background color of cells in "column2" if they are empty. My current code is not working as expected, as it colors all rows instead of just those with empty cells in "column2".

JS:

// loops through rows
for (var i = 0; rows; rows = tbody.rows[i]; i++) {
    //loops through cells
    for (var j = 1; col; col = rows.cells[j]; j++) {
        //gets cells of current row
        cells = rows[i].getElementsByTagName('td');
        //gets cells of col 1
        ocells = rows.cells[j].getElementByTagName('td');

        while (rows.cells[j] === null) {
            //condition here>>
        }
    }
}

HTML:

<div id="table">
    <table name="tbody" id="tbody1">
        <tr> 
            <td>col1 Val1</td>
            <td>col2 Val2</td>
        </tr>
        <tr>
            <td>col1 Val3</td>
            <td>col2 Val4</td>
        </tr>
    </table>
</div>

If you can offer any assistance, I would greatly appreciate it!

Answer №1

Instead of looping over everything, consider a more efficient approach:

If you have created the table (or it was generated), assign a class to each cell in column 2.

Let's name this class: "column-2-cell"

Now with jQuery:

$('.column-2-cell:empty').addClass('empty');

Check out this fiddle for an example: http://jsfiddle.net/Ubz6w/

You can also try this alternative method using jQuery:

$('tr').each(function(i) {
    var column2cell = $($(this).children('td')[1]);
    if (column2cell.text() == "") {
        column2cell.css('background-color', 'red');        
    }
});

Another example in this fiddle: http://jsfiddle.net/Ubz6w/1

I hope this information is helpful!

Answer №2

Utilize this code snippet to change the background color of the second column if it is empty.

let tableBody = document.getElementsByName("tbody")[0];

for (let i = 0, rows; rows = tableBody.rows[i]; i++) {
    if(rows.cells[1].innerHTML === "") {
        rows.cells[1].classList.add("highlight");
    }
}

Check out the Live Demo here

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

What is the best way to utilize the forEach method in React to manipulate a navigation element containing multiple links?

Here is the code I'm trying to convert: document.addEventListener("scroll", function() { const links = document.querySelectorAll(".nav-link"); for (const l of links) l.classList.toggle('scrolling', window.scrollY &g ...

Array of JSON data passed in the request body

Recently, I have been attempting to pass JSON data to my req.body. The data structure is as follows: answers = ["A","B"]; //An array to be included in the JSON Object var Student_Answers = { //JSON object definition Answers: answers, matricNumber: ...

Inserting data into a Textbox by clicking on a Div

I'm currently working on creating a wallpaper changer for my website. Right now, I'm looking to input the URL of a wallpaper into a text box when the corresponding DIV option in a CSS menu is clicked. Below is the JQuery I am using: $("div.bg8 ...

What is the best practice for accessing specific components of JSON values that are delimited by colons?

When working with an API that returns a JSON containing strings separated by colons, such as: { "id": "test:something:69874354", "whatever": "maybe" } It may be necessary to extract specific values from these strings. For example, in the given JSON s ...

To ensure the smooth functioning of a React application running on a Docker container in Ubuntu 16.04, it is

I'm currently in the process of setting up a docker container for running a react app that sends a fetch request to another docker container containing a node server. The deployment is on Ubuntu 16.04, however, after building and deploying the contain ...

Having trouble getting collision events to trigger in ThreeJS when using the PhysiJS physics engine?

When an object falls and collides with the ground, an alert box should pop up displaying the message "Box just hit the ground". However, there seems to be an issue as the alert box is not being created upon collision. Additionally, no relevant JavaScript ...

Modify variables in the child function to be utilized in the parent function

I need to create a scenario where a variable defined in a parent function is modified within a child function and then returned back to the parent as an updated variable. Here is the code I have attempted: let value = 20; console.log(value); // Output: ...

Tips for resolving the Angular Firebase v.7 problem: The search for '_delegate' in the users/xxxxx cannot be conducted using the 'in' operator

I'm working on implementing the new Angular Firebase v.7 with Angular and encountering an error message: Cannot use 'in' operator to search for '_delegate' in users/1QAvZYg6aqe0GhA13tmVAINa. While I found a similar question ( Fire ...

"What's the best way to make sure a checkbox stays checked and its content remains visible after a

After updating my HTML content, it now consists of a hidden table inside a div with the class "myClass": <div class="myClass" style="display:none"> <table class="table table-hover"> ..... </table> </div> The table remains hidden u ...

Combine TypeScript files in a specific sequence following compilation

I am hoping to utilize gulp for the following tasks: Compiling TypeScript to JavaScript, which is easily achievable Concatenating JavaScript files in a specific order, proving to be challenging Since I am developing an Angular application, it is crucial ...

Guide on accessing nested objects in EJS templates

I'm attempting to extract the "info" portion from the JSON data provided below. In my code snippet, I'm using the <%= person['person_details']%> to access that specific section of the JSON. However, it only returns [Object Obje ...

Tips on adjusting the flexibility of videojs markers for sliding or moving

I need assistance in making my markers movable along with the seek bar. I want them to be as slideable as the jqueryui-slider. Question: How can I make both of my markers movable like the jqueryui-range slider shown below the video in the example code? ...

Utilize the _sortBy function from the lodash library to arrange an array based on a specific field

Looking at an array of objects similar to this: myArray = [ {AType: "aaa", Description: "De", …}, {AType: "bbb", Description: "Hi", …}, {AType: "ccc", Description: "Un", …}, {AType: "ddd", Description: ...

creating a Vuejs button function that will add together two given numbers

Help needed with VueJs code to display the sum of two numbers. Seeking assistance in developing a feature that calculates the sum only when the user clicks a button. Any guidance would be greatly appreciated! <!DOCTYPE html> <html lang="en"> ...

Verify whether the default export of a file is a React function component or a standard function

Trying to figure out how to distinguish between modules exporting React function components and regular functions. Bun employs file-based routing, enabling me to match requests with module files to dynamically import based on the request pathname. Conside ...

Experience choppy scrolling in Internet Explorer

Check out my click and drag scrolling Image Viewer here. While it functions perfectly in Firefox and Chrome, Internet Explorer is giving me some trouble. The movement seems jerky, especially when scrolling diagonally. It's like the scroll is sluggish ...

Reposition the Column, Filter popover within the MUI Data Grid Pro

I am working with the MUI Data Grid Pro to showcase my data. By default, the Data Grid Pro exhibits the toolbar on the left side. Although I managed to shift the toolbar to the right side, the popovers and menus retained their position on the left. My inte ...

In my Flask Bootstrap website, the navigation bar remains unchanged by the presence of Javascript

I am currently in the process of creating a navigation bar for my Flask website using Bootstrap. However, when I implemented it into my HTML code, it is not displaying correctly which leads me to believe that the JavaScript may not be functioning properly. ...

attempting to communicate with Postman but encountering an error in the process

Upon attempting to send a request through Postman, I encountered an error. Nodemon is operational and the server is active in the terminal. index.server.js file //jshint esversion:6 const express = require("express"); const env = require("d ...

Adjusting the timeout value for axios does not produce any impact

In our code, the timeout is configured as follows: axios.defaults.timeout === 3000; ...... try { const response = await axios.get(Url, { headers: { 'Authorization': authToken.authHeaderValue, } ...