Динамически добавленный флажок не доступен для щелчка при вставке в таблицу HTML (машинописный текст). ⇐ Html

[Гость]

Я пытаюсь создать простой веб-сайт, отображающий банковские операции по кредитной карте (дополнительный проект для изучения TS и HTML).

На веб-сайте отображаются все транзакции между двумя датами (после выбора дат) в динамически создаваемой таблице, а также создается столбец с флажками для выбора, какие транзакции должны быть отправлены на утверждение (при нажатии специальной кнопки для утверждения отмеченные транзакции отправляются через restful API в независимую серверную службу).

Таблица формируется через машинописный текст корректно со всеми строками и правильными данными, но когда я добавляю галочки, они не реагируют на нажатия (невозможно поставить/снять галочку).

Это код для динамического добавления строк в таблицу:

const addCells = (таблица: HTMLElement, currTransaction:any, color:string) => { const descriptors = ["Описание", "ДатаТранзакции", "Сумма", "Валюта", "Статус"]; const row = document.createElement("tr"); for (пусть i в дескрипторах) { const созданнаяCell = createCell (currTransaction, дескрипторы ); row.appendChild(createdCell); } applyRowStyling (строка, цвет); addCheckBox(строка, currTransaction); таблица.appendChild(строка); } const createCell = (currTransaction:any, currDescriptor:string):HTMLTableCellElement => { const tableCell = document.createElement("td"); tableCell.style.border = "черный сплошной 1 пиксель"; const descriptorText = document.createTextNode(currTransaction[currDescriptor]); tableCell.appendChild(дескриптортекст); вернуть tableCell; } const addCheckBox = (row:HTMLTableRowElement, currTransaction:any) => { const tableCell:HTMLTableCellElement = document.createElement("td"); tableCell.style.border = "черный сплошной 1 пиксель"; флажок const:HTMLInputElement = document.createElement('input'); checkbox.setAttribute('тип', 'флажок'); флажок.проверено = ложь; флажок.отключено = ложь; // checkbox.name="approvalCheckbox" checkbox.id = currTransaction['TransNum']; tableCell.appendChild(флажок); checkBoxes.push(флажок); row.appendChild(tableCell); } const applyRowStyling = (row:HTMLTableRowElement, color:string) => { row.style.backgroundColor = цвет; row.style.border = 'черный сплошной 1 пиксель'; row.style.textAlign = 'центр'; } const checkBoxes = []; const addCells = (table/*: HTMLElement*/, currTransaction/*: Any*/, color/*: string*/) => { константные дескрипторы = [ "Описание", "Дата сделки", "Количество", "Валюта", "Положение дел", ]; const row = document.createElement("tr"); for (пусть i в дескрипторах) { const созданнаяCell = createCell (currTransaction, дескрипторы ); row.appendChild(createdCell); } applyRowStyling (строка, цвет); addCheckBox(строка, currTransaction); таблица.appendChild(строка); }; const createCell = ( currTransaction/*: любой*/, currDescriptor/*: строка*/, )/*: HTMLTableCellElement*/ => { const tableCell = document.createElement("td"); tableCell.style.border = "черный сплошной 1 пиксель"; const descriptorText = document.createTextNode( currTransaction[currDescriptor] ); tableCell.appendChild(дескриптортекст); вернуть tableCell; }; const addCheckBox = (row/*: HTMLTableRowElement*/, currTransaction/*: Any*/) => { const tableCell/*: HTMLTableCellElement*/ = document.createElement("td"); tableCell.style.border = "черный сплошной 1 пиксель"; const checkbox/*: HTMLInputElement*/ = document.createElement("input"); checkbox.setAttribute("тип", "флажок"); флажок.проверено = ложь; флажок.отключено = ложь; // checkbox.name="approvalCheckbox" checkbox.id = currTransaction["TransNum"]; tableCell.appendChild(флажок); checkBoxes.push(флажок); row.appendChild(tableCell); }; const applyRowStyling = (row/*: HTMLTableRowElement*/, color/*: string*/) => { row.style.backgroundColor = цвет; row.style.border = "черный сплошной 1 пиксель"; row.style.textAlign = "центр"; }; addCells( document.getElementById("таблица"), { «Описание»: «Описание», «ДатаТранзакции»: новая Дата(), «Сумма»: 42, «Валюта»: «доллар США», "Статус: ожидание", }, "белый" ); #the-table { маржа сверху: 50 пикселей;

Я попробовал вручную создать флажок в таблице в html-файле в форме:

Это привело к тому, что флажок сработал (но, конечно, это не помогает, поскольку мне нужно, чтобы флажки добавлялись динамически).

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