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?
2 answers
solution1
2 2015-09-06 14:50:08
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;}
solution2
1 ACCPTED 2015-09-06 14:54:58
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');
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.