Snippet code copied from this link
In my app, clicking on the Add New Item button dynamically adds rows. Clicking on any number in the table populates it in the corresponding row. Hovering over the 1st row changes its background color to green along with the matching cell in the table.
I want this effect to apply to all subsequent rows when hovered over, changing the background color of the entire row and its corresponding cells in the table.
//Code for adding child and input fields dynamically
// Starting number of inputs
let count = 5;
// Wrapper
const wrapper = document.querySelector('#wrapper');
document.querySelector('#btn').addEventListener('click', () => {
const container = document.createElement('div');
for (let i = 0; i < 5; i++) {
// Increment the count to ensure uniqueness
count++;
// Create a new `input` element
const input = document.createElement('input');
input.type = 'text';
input.name = count;
input.size = '4';
input.id = `inp${count}`;
container.appendChild(input);
// Add whitespace after each child
container.append(document.createTextNode(' '));
}
wrapper.appendChild(container);
});
//END code
let currentInput = 1;
let bonusInput = 1;
$("#table1 td").on('click', function(event) {
let num = $(this).text();
$("#inp" + currentInput++).attr("value", num);
});
//Bonus input
$("#table2").on('click', function(event) {
let bon = event.target.textContent;
$("#bonus" + bonusInput++).attr("value", bon);
});
$("input").hover(function(event) {
let parent = $(this).parent();
$(parent.children()).each(function(index, element) {
let num = $(element).val();
if (num) {
$(this).css("backgroundColor", "green");
$("#table1 td").each(() => {
if ($(this).text() === num) $(this).css("backgroundColor", "green");
});
}
});
},
function(event) {
let parent = $(this).parent();
$(parent.children()).each((index, element) => {
$(element).css("backgroundColor", "white");
});
$("#table1 td").each(() => {
$(this).css("backgroundColor", "orange");
});
});
table {
border-collapse: collapse;
border: 5px solid black;
width: 100%;
}
td {
width: 50%;
height: 2em;
border: 1px solid #ccc;
background-color: orange;
text-align: center;
vertical-align: middle;
font-weight: bold;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Table on the left -->
<div style="width: 140px; float: left;">
...
</div>