What is the best way to assign a class to certain columns within a table?

Question

What is the best way to assign a class to certain columns within a table?

I'm working on a code that generates random numbers for 3 columns and checks if each generated number exceeds +5/-5 of its previous number. However, I've encountered an issue where the first two columns always have the "blink" CSS applied to them, even when the generated number falls within the specified range. You can view my code on JSFiddle here: https://jsfiddle.net/d5ykog23/

Here is the code snippet:

var x = document.getElementById("tableContainer");
var i;
var n = 0;
var m;

$("#genNum").click(function(){

    for(j = 0; j < x.rows[1].cells.length; j++){
        m = x.rows[1].cells[j].innerHTML;
        i = Math.random() * (20 - 1) + 1;
        x.rows[1].cells[j].innerHTML = Math.round(i);
        n = x.rows[1].cells[j].innerHTML

        if (!((+m - 5) < n && (+m + 5) > n)) {
            $("#tableContainer th:nth-child(" + j + "), #tableContainer td:nth-child(" + j + ")").addClass("blink");
        }
    }
});

In addition, I have a question about removing the "blink" class from the entire table. I attempted the following code without success:

$("#stopAlarm").click(function(){
    $("#tableContainer").removeClass("blink");
});

javascript jquery css html-table

Answer 1

Answer №1

For quick access to the solution, visit the link below: https://jsfiddle.net/r98yrpo3/

$(document).ready(function(){
    // var x = document.getElementById("tableContainer").rows[1].cells;
    var x = document.getElementById("tableContainer");
    var i;
    var n = 0;
    var m;
    var alarm = document.createElement("AUDIO");
    alarm.setAttribute("src", "alarm.mp3");

    alarm.addEventListener('ended', function() {
        this.play();
    }, false);


    $("#genNum").click(function(){
$("#tableContainer td").removeClass("blink");       
        $("#tableContainer th").removeClass("blink");
        for(j = 0; j < x.rows[1].cells.length; j++){
        
            m = x.rows[1].cells[j].innerHTML;
            
            i = Math.random() * (20 - 1) + 1;
            x.rows[1].cells[j].innerHTML = Math.round(i);
            n = x.rows[1].cells[j].innerHTML

               


            if (m-n <= 5 && m-n >=-5) {
                // console.log("flag");
                $("#tableContainer th:nth-child(" + (j+1) + "), #tableContainer td:nth-child(" + (j+1) + ")").addClass("blink");
                // alarm.play();
            }
        }
    });


    $("#stopAlarm").click(function(){
        $("#tableContainer td").removeClass("blink");       
        $("#tableContainer th").removeClass("blink");

    });
});

/*table formatting*/
table, th, td {
    border: 1px solid black;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

/*
tr:nth-child(even) {
    background-color: #dddddd;
}
*/

.blink {
    animation:blink 300ms infinite alternate;
}

@keyframes blink {
    from { background-color: white; }
    to { background-color: red; }
};

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="myModule.js"></script>
        
        <title>Test</title>

    <body>
        <h1 id="greeting">Test Greetings</h1>
        <table id="tableContainer">
            <tr>
                <th field="col1">-----</th>
                <th field="col2">-----</th>
                <th field="col3">-----</th>
            </tr>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>-----</td>
                <td>-----</td>
                <td>-----</td>
            </tr>
        </table>
        
        <button id="stopAlarm" type="button">Stop Alarm</button>
        <button id="genNum" type="button">Generate Number</button>
    </body>

Answer 2

For quick access to the solution, visit the link below: https://jsfiddle.net/r98yrpo3/

$(document).ready(function(){
    // var x = document.getElementById("tableContainer").rows[1].cells;
    var x = document.getElementById("tableContainer");
    var i;
    var n = 0;
    var m;
    var alarm = document.createElement("AUDIO");
    alarm.setAttribute("src", "alarm.mp3");

    alarm.addEventListener('ended', function() {
        this.play();
    }, false);


    $("#genNum").click(function(){
$("#tableContainer td").removeClass("blink");       
        $("#tableContainer th").removeClass("blink");
        for(j = 0; j < x.rows[1].cells.length; j++){
        
            m = x.rows[1].cells[j].innerHTML;
            
            i = Math.random() * (20 - 1) + 1;
            x.rows[1].cells[j].innerHTML = Math.round(i);
            n = x.rows[1].cells[j].innerHTML

               


            if (m-n <= 5 && m-n >=-5) {
                // console.log("flag");
                $("#tableContainer th:nth-child(" + (j+1) + "), #tableContainer td:nth-child(" + (j+1) + ")").addClass("blink");
                // alarm.play();
            }
        }
    });


    $("#stopAlarm").click(function(){
        $("#tableContainer td").removeClass("blink");       
        $("#tableContainer th").removeClass("blink");

    });
});

/*table formatting*/
table, th, td {
    border: 1px solid black;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

/*
tr:nth-child(even) {
    background-color: #dddddd;
}
*/

.blink {
    animation:blink 300ms infinite alternate;
}

@keyframes blink {
    from { background-color: white; }
    to { background-color: red; }
};

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="myModule.js"></script>
        
        <title>Test</title>

    <body>
        <h1 id="greeting">Test Greetings</h1>
        <table id="tableContainer">
            <tr>
                <th field="col1">-----</th>
                <th field="col2">-----</th>
                <th field="col3">-----</th>
            </tr>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>-----</td>
                <td>-----</td>
                <td>-----</td>
            </tr>
        </table>
        
        <button id="stopAlarm" type="button">Stop Alarm</button>
        <button id="genNum" type="button">Generate Number</button>
    </body>

What is the best way to assign a class to certain columns within a table?

Answer №1

Similar questions

Do hooks get executed during every render phase?

The JSON parsing failed due to an expected '}' character missing

Jquery Banner Fade In animation malfunctioning

ReactJS incorporates multiple CSS files

Is it possible to shift the "ul" block of the navigation bar to the right without compromising the responsiveness toggle button functionality?

Is there a way to ensure that mongoose waits for document creation before disconnecting?

Trigger the execution of a Python script through a webpage with just the click of a button

Feeling lost when it comes to forms and hitting that submit button?

How can you navigate to different pages in Chrome by selecting radio buttons that are designed as clickable

Is there a way to utilize AJAX to submit a request to a PHP XML-RPC server?

Issue with passing JSON data to a PHP file using CURL

Issue an alert and refresh the webpage when a file extension upload script is detected

When trying to target the checkbox value, the error "Object Expected"

Incorporate the ajax response into the design of the Material Design

My custom PHP page designed to insert new records into a MySQL database table appears to be ineffective as it is not updating the table as intended

Amazon Banner Integration for Angular Version 4

Is it necessary to utilize container or container-fluid within the grid system layout?

The Electron NPM program is unable to locate the file:///eel.js, yet Python has no trouble locating it

Choosing between Ajax.ActionLink and combining Html.ActionLink with a Jquery.Ajax call

Adjust the parent div's background color when a radio button is selected