У меня есть приложение, при котором, когда пользователь нажимает кнопку «Добавить новый элемент», строки добавляются динамически с использованием Javascript, и каждое поле ввода в добавляемой строке динамически имеет уникальный идентификатор, и это прекрасно работает.
При нажатии любого числа в таблице слева оно динамически заполняется в строке слева.При щелчке другого числа в таблице справа он заполняет один вход справа (после значка плюса).
При наведении курсора на 1-ю строку цвет фона меняется на зеленый, включая соответствующее совпадениев таблице слева, которая работает нормально.
Я пытаюсь добавить логику, при которой а.) если пользователь нажимает кнопку Добавить новый элемент, чтобы добавить новую строку (строка добавляется в соответствии сформат 1-й строки) .
b.) После того, как пользователь нажимает на любое число td в 2 таблицах (справа и слева) и их значения заполняются в строках динамически (значение налевая таблица заполняется в строке перед знаком «+», а значение в правой таблице заполняется в правой таблице после знака «+»), когда пользователь наводит курсор на значения в строках, их цвет фона должен немедленно измениться и соответствовать значениям таблиц, которые онранее были выбраны из ...
NB ~ В основном я хочу поведение в 1-й строке (после наведения мыши, когдаn входов заполняются из соответствующих таблиц) для имитации в последующих строках, которые динамически добавляются после нажатия кнопки .
JsFiddle link: Js Fiddle
~ Пожалуйста, помогите в этой довольно сложной задаче ..
Javascript код, который комментируется, чтобы показать мои шаги в задаче
//Add row input fields dynamically on button click
// 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 that it is unique
count++;
// Create new `<input>` element
const input = document.createElement("input");
input.type = "text";
input.name = count;
input.size = "4";
input.id = `inp${count}`;
container.appendChild(input);
// Optional: add empty whitespace after each child
container.append(document.createTextNode(" "));
}
wrapper.appendChild(container);
});
//END creating rows dynamically
let currentInput = 1;
let bonusInput = 1;
//Left table on click event
$("#table1 td").on("click", function(event) {
//gets the number associated with the click
let num = $(this).text();
//Populate it in 1st row input fields (before plus sign)
$("#inp" + currentInput++).attr("value", num);
});
//Right table on click event
$("#table2").on("click", function(event) {
//gets the number associated with the click
let bon = event.target.textContent;
//Populate it in 1st row input fields (after plus sign)
$("#bonus" + bonusInput++).attr("value", bon);
});
//Manipulate background colors of rows with corresponding tables they were
//selected on hover in and hover out
$("input").hover(
function(event) {
let parent = $(this).parent();
$(parent.children()).each(function(index, element) {
let num = $(element).val();
//console.log(num);
if (num) {
//Change input color on hover
$(this).css("backgroundColor", "green");
//Change left table bgcolor on hover
$("#table1 td").each(function() {
if ($(this).text() === num) $(this).css("backgroundColor", "green");
});
// $("#table2 td").each(function() {
// if ($(this).text() === num) $(this).css("backgroundColor","green");
// });
}
});
},
function(event) {
//Change input color on hover out
let parent = $(this).parent();
$(parent.children()).each(function(index, element) {
$(element).css("backgroundColor", "white");
});
//Change left table bgcolor on hover out
$("#table1 td").each(function() {
$(this).css("backgroundColor", "orange");
});
}
);