Menu
I am attempting to create a table without any previous information in the HTML document.
In this example below I would like to have a table created, then a header, and row. Assume the table layout in the real program to be in sets of <tr><th> and <tr><td> (Header row and then cell row).
I would like to then be able to hover on any cell row and have it color both that cell row and the previous header row.
The issue is that the methods previously used don't seem to work if the table is entirely dynamically allocated.
var statTable = $('<table>', {"id": "statTable", "class": "statTable"});
$("#tableCreate").click(function() {
$("#newDiv").append(statTable);
$("#statTable").append("<tbody>");
$(this).prop('disabled', true);
});
$("#setCreate").click(function() {
$("tbody").append($("<tr>")).append($("<th>").text("HEADER"));
$("tbody").append($("<tr>")).append($('<td>').text("TESTING..."));
});
$("#statTable tr").hover(function() {
$(this).prev().find('th').removeClass('green');
$(this).prev().find('th').addClass('red');
}, function() {
$(this).prev().find('th').removeClass('red');
$(this).prev().find('th').addClass('green');
});td {
border: 1px solid black;
}
th {
background-color: green;
border: 1px solid black;
}
.red {
background-color: red !important;
}
.green {
background-color: green !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<button id="tableCreate">make table </button>
<button id="setCreate">add set</button>
<div id="newDiv">
</div>
</html>
670
asked Mar 29 '26 00:03
This is because when you bind an event to an element it has to exist.
There is a trick to do it though. Instead of binding an event to an element you can bind to document and trigger it only on specific element.
Also you have a minor mistake while appending th and td to tr. I fixed it and now it works properly.
Here is an working example
var statTable = $('<table>', {"id": "statTable", "class": "statTable"});
$("#tableCreate").click(function() {
$("#newDiv").append(statTable);
$("#statTable").append("<tbody>");
$(this).prop('disabled', true);
});
$("#setCreate").click(function() {
$("tbody").append($("<tr>").append($("<th>").text("HEADER")));
$("tbody").append($("<tr>").append($('<td>').text("TESTING...")));
});
$(document).on({
mouseenter: function() {
$(this).prev().find('th').removeClass('green');
$(this).prev().find('th').addClass('red');
},
mouseleave: function() {
$(this).prev().find('th').removeClass('red');
$(this).prev().find('th').addClass('green');
}
}, "#statTable tr");td {
border: 1px solid black;
}
th {
background-color: green;
border: 1px solid black;
}
.red {
background-color: red !important;
}
.green {
background-color: green !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<button id="tableCreate">make table </button>
<button id="setCreate">add set</button>
<div id="newDiv">
</div>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
