Hi how can I click on a table cell and change its color in the below code

Question

0.00/5 (No votes)

See more:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Create a table</title> 
<style type="text/css"> 
div {
background: red;  
margin: 5px;    
}

table {
 border: 2px solid black;   
}

td {
    padding: 10px;
 border: 1px solid lightgrey; 
}


</style> 
 
</head>

<body > 
<input type="text" id="tb1" value="2">
<input type="text" id="tb2" value="4">
<form> 
<input type="button" onclick="createTable()" value="Create the table"> 
</form>
</body>
</html>

<script>
function createTable() {
    var a, b, tableElem, rowElem, colElem;

    a = document.getElementById('tb1').value;
    b = document.getElementById('tb2').value;

    if (a == "" || b == "") {
        alert("Please enter some numeric value");
    } else {
        tableElem = document.createElement('table');

        for (var i = 0; i < a; i++) {
            rowElem = document.createElement('tr');

            for (var j = 0; j < b; j++) {
                colElem = document.createElement('td');
                //colElem.appendChild(document.createTextNode(j + 1));
                rowElem.appendChild(colElem);
            }

            tableElem.appendChild(rowElem);
        }

        document.body.appendChild(tableElem);

    }
}





</script>

What I have tried:

i dont know how can i do that with one cell because its in dom and not in html

Posted 27-Dec-19 1:48am

malike naemi

Updated 28-Dec-19 5:31am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

DerekT-P · Answer 1 · 2019-12-28T05:31:00

how about something like (after adding the table into the document body):

JavaScript

$('td').click(function() {$(this).addClass('highlighted');});

This will cause any TD element to change colour when clicked; if you want to confine it to just the appended table, then add a unique ID attribute to the TABLE element and refer to that in the selector:

JavaScript

$('#addedTable td')....

(This requires you to include at least a basic version of JQuery to your page). You'll also need to add a class .highlighted with whatever visual styling you want for your highlighted cells.C