Change color on my Javascript made table with jQuery?

Question

I have two input boxes to put in height and width, and a button to make a table with Javascript. Now I want to make the color in each cell change as I hover over them. Preferably with jQuery.

    function createTable(inRows, inCols) {
       var inRows = document.getElementById('height').value;
       var inCols = document.getElementById('length').value;

       var body = document.getElementsByTagName("body")[0];

           var tbl = document.createElement("table");
           var tblBody = document.createElement("tbody");

            for (var i = 0; i < inRows; i++) {
                var row = document.createElement("tr");

            for (var j = 0; j < inCols; j++) {
                var cell = document.createElement("td");
                row.appendChild(cell);
            }

            tblBody.appendChild(row);
        }

        tbl.appendChild(tblBody);
        body.appendChild(tbl);
    }   

$(document).ready(function() {
    $('td').hover(function() {
        $(this).addClass('black');
    });
});

In my feeble beginner mind, this looks right. But.. its not. Am I on the right track. And how do I make it happen?

Can you be more specific as to why it's not right? What happens? What error message do you get? — banging
– banging, Commented Sep 6, 2015 at 14:53
You should not use javascript for this. CSS exists for this kind of things. — dfsq
– dfsq, Commented Sep 6, 2015 at 14:56
@dfsq - It looks like a javascript/jQuery study exercise, but the point is still valid. — Ori Drori
– Ori Drori, Commented Sep 6, 2015 at 15:00

Callan Heard · Accepted Answer · 2015-09-06 14:50:08Z

2

I'm assuming you're using CSS to style the table, as you're assigning a class for the hover style you want? If so, you can use pure CSS to achieve this affect:

td:hover {background: black;}

answered Sep 6, 2015 at 14:50

Callan Heard

7271 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ori Drori · Accepted Answer · 2015-09-06 14:54:58Z

You are calling the event handler binding on document ready, but the table is not prepared yet. Just add the handler to the end of the createTable function. I've changed the handlers to mouseenter and mouseleave, so the class will be added and removed when the mouse leave the cell (fiddle).

I've also used .on with event delegation, this means that I only add one (two in this case) event handler to the table, and it will only react to event on the cells. In this way, if you add o remove cells, the event handler will work with them automatically.

 function createTable(inRows, inCols) {
       var inRows = document.getElementById('height').value;
       var inCols = document.getElementById('length').value;

       var body = document.getElementsByTagName("body")[0];

       var tbl = document.createElement("table");
       var tblBody = document.createElement("tbody");

       for (var i = 0; i < inRows; i++) {
           var row = document.createElement("tr");

           for (var j = 0; j < inCols; j++) {
               var cell = document.createElement("td");
               row.appendChild(cell);
           }

           tblBody.appendChild(row);
       }

       tbl.appendChild(tblBody);
       // appends <table> into <body>
       body.appendChild(tbl);

       $(tbl).on('mouseenter', 'td', function () {
           $(this).addClass('black');
       });

       $(tbl).on('mouseleave', 'td', function () {
           $(this).removeClass('black');
       });
   }

Collectives™ on Stack Overflow

Change color on my Javascript made table with jQuery?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related