How to add onClick function to this code

Question

I am trying to add an onclick function to this table. So when I click on the cell it will change color from red to blue.

Relevant code below:

function addTable() {

    var myTableDiv = document.getElementById("myDynamicTable");


    var table = document.createElement('TABLE');
    table.border='1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);


    for (var i=0; i<ruudud.value; i++){
       var tr = document.createElement('TR');
       tableBody.appendChild(tr);

       for (var j=0; j<ruudud.value; j++){
            var td = document.createElement('TD');
            td.width='50';
            td.height='50';


            td.style.backgroundColor="red";




            tr.appendChild(td);
            }
       }
    myTableDiv.appendChild(table);
}

I have tried to fit into code but I have no idea how to fit in in this code so it would work. It gives me errors, that some things are not defined — triPs
– triPs, Commented Oct 10, 2015 at 22:28
You show the code that generates the table itself. What code have you tried in order to toggle the background color? For instance, you might have javascript that changes the class of the td element on a click to a style that appears in blue, or try to change the style directly. — pft221
– pft221, Commented Oct 10, 2015 at 22:37
is it possible to add onCLick effect to td.style.background="red"; so that on click it will change the style to blue? — triPs
– triPs, Commented Oct 10, 2015 at 22:45

Osama AbuSitta · Accepted Answer · 2015-10-10 23:26:18Z

There is many ways to do this as the below :
1 - In for loop

 <div id="myDynamicTable"></div>
 <script type="text/javascript">
     addTable();
  function addTable() {

    var myTableDiv = document.getElementById("myDynamicTable");


    var table = document.createElement('TABLE');
    table.border = '1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);


    for (var i = 0; i < 3 ; i++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);

        for (var j = 0; j < 2; j++) {
            var td = document.createElement('TD');
            td.width = '50';
            td.height = '50';


            td.style.backgroundColor = "red";

           //************************************************
            td.setAttribute("onclick", "yourFun(this)");

            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
}

function yourFun(tdObj) {
    tdObj.style.backgroundColor = "green";
}

2 - By Function :

<div id="myDynamicTable"></div>
 <script type="text/javascript">
addTable();
setFunction();
function addTable() {

    var myTableDiv = document.getElementById("myDynamicTable");


    var table = document.createElement('TABLE');
    table.border = '1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);


    for (var i = 0; i < 3 ; i++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);

        for (var j = 0; j < 2; j++) {
            var td = document.createElement('TD');
            td.width = '50';
            td.height = '50';


            td.style.backgroundColor = "red";

            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
}

function setFunction() {
    var myTableDiv = document.getElementById("myDynamicTable");
    var tds = myTableDiv.getElementsByTagName("td");
    for (var i = 0; i < tds.length; i++) {
        tds[i].setAttribute("onclick", "yourFun(this)");
    }
}

function yourFun(tdObj) {
    tdObj.style.backgroundColor = "green";
}

3- Or You can use Event Delegation see this http://davidwalsh.name/event-delegate

buzzsaw · Accepted Answer · 2015-10-10 23:02:43Z

0

You can do it by setting the onclick attribute for each td in your for loop which calls a corresponding function to handle a class change. The colors can be defined in your css for the two classes.

// for loop addition
    td.setAttribute('class', 'bgRed');
   // and
    td.setAttribute('onclick', chgColor(this));
   // or
    td.onclick(function(this) {return function() {chgColor(this);};})(this);

// Function for changing td background class/color    
    function chgColor(td){  
        td.className == "bgRed" ? td.className = "bgBlue" : td.className = "bgRed";
    }

answered Oct 10, 2015 at 23:02

buzzsaw

1,4961 gold badge10 silver badges14 bronze badges

Comments

Rajendra kumar Vankadari · Accepted Answer · 2015-10-10 23:12:12Z

0

You can directly add the event listener on the table, and in the callback you can check the event source and act accordingly. The event source would be a node so if you want to hold any specific data, you can keep attributes and read them on event.

answered Oct 10, 2015 at 23:12

Rajendra kumar Vankadari

2,3971 gold badge18 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to add onClick function to this code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related