Форма не отправляет данные из элементов, вложенных в таблицу ⇐ Jquery

[Anonymous]

У меня есть следующий код, чтобы получить значения из динамически создаваемых элементов таблицы. Я не могу получить входные данные при отправке изображения (см. консоль). Я не знаю, что делать, посоветуйте!

Код: Выделить всё

console.clear();
var dimensions = [4, 4];
var controlType = [];

// empty and repopulate display with specified dimensions
function populate() {
var table = $("#display > table > tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
table.empty();

let row = 0;
for (let i = 0; i < dimensions[1]; i++) {
row++;
let column = 0;
var newRow = $(tr).clone().appendTo(table);
for (let i = 0; i < dimensions[0]; i++) {
column++
let position = row + "-" + column
let newCell = $(td).clone().appendTo(newRow);
$(newCell).append("")
$(newCell.children()).click(function () {
let inputType = $("input:checked").val();
if (inputType == "lights" && !$(this).hasClass("wall")) {
$(this).toggleClass("on off");
} else if (inputType == "walls") {
$(this).toggleClass("wall");
};
});
};
};

console.log("Populated display\nDimensions:", dimensions[0] + "x" + dimensions[1]);
};

// when document is ready
$(document).ready(function () {
populate();

// solve the puzzle input
$("#display").submit(function (e) {
e.preventDefault();

let formData = $(this).serializeArray();
console.log(formData);
});

// generate a dimensions list containing user input height and width on submit
$("#options").submit(function (e) {
e.preventDefault();

let formData = $(this).serializeArray();
formData.forEach(function (i) {
let val = Math.round(i.value)
if (i.name == "width") dimensions[0] = val;
if (i.name == "height") dimensions[1] = val;
});

populate();
});
});

Код: Выделить всё

:root {
--font: Arial;
--fs: 30px;
--inputBg: whitesmoke;
--border: 2px solid lightgrey;
}

/* always show arrow buttons on number input */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}

/* body formatting */
body {
width: auto;
height: auto;
font-family: var(--font);
font-size: var(--fs)
}

/* lights out puzzle formatting */
#lightsOut {
width: fit-content;
height: auto;
margin: 0px;
border: var(--border);
display: flex;
gap: 0.2em;
}

/* display formatting */
#display {
& table {
height: fit-content;
margin-top: 0.1em;
margin-right: 0.1em;
border-collapse: collapse;
& tr {
& td {
padding: 0px;

& input {
width: 1.5em;
height: 1.5em;
font-size: inherit;
margin-bottom: 0.1em;
margin-left: 0.1em;
padding: 0px;
}
& .on {
background-color: var(--inputBg);
border: var(--border);
}
& .off {
background-color: darkgrey;
border: 2px solid grey;
}
& .wall {
background-color: transparent;
border: 2px solid transparent;
}
}
}
}
& span {
width: 100%-var(--margin);
height: 1.5em;
display: flex;
font-size: inherit;
text-align: center;
margin-bottom: 0.1em;
margin-left: 0.1em;

&  input[type="submit"] {
width: 100%;
height: 1.5em;
font-size: inherit;
background-color: var(--inputBg);
margin-right: 0.1em;
border: var(--border);
}
}
}

/* user interface */
#ui {
display: flex;
flex-direction: column;
margin-top: 0.1em;
margin-right: 0.1em;

/* options formatting */
& #options,
#controls {
display: flex;
flex-direction: column;

& span {
width: 100%;
height: 1.5em;
display: flex;
justify-content: left;
font-size: inherit;
text-align: center;
margin-bottom: 0.1em;
margin-left: 0.1em;

& label {
width: 3.25em;
height: 1.5em;
font-size: inherit;
margin-right: 0.5em;
display: flex;
align-items: center;
}

& input[type="number"] {
width: 1.5em;
height: 1em;
font-size: inherit;
padding: 0px;
align-self: center;
}

& input[type="radio"] {
width: 1em;
height: 1em;
font-size: inherit;
margin-left: 0px;
align-self: center;
}

& input[type="submit"] {
width: 100%;
height: 1.5em;
font-size: inherit;
background-color: var(--inputBg);
margin-right: 0.1em;
border: var(--border);
}
}
}
}

Код: Выделить всё

Width:



Height:









Lights



Walls

Когда вы нажимаете кнопку «Решить», в консоли появляется пустой список вместо все входы. Я попробовал добавить значение к каждому входу, но это не помогло.

Подробнее здесь: https://stackoverflow.com/questions/790 ... in-a-table