У меня есть таблица. В каждой ячейке этой таблицы есть input. Но в этот input я почему-то не могу вписать текст.
Кода достаточно много, поэтому я оставлю самое важное
var tbody = document.getElementsByClassName('table__body')[0];
/* Параметры таблицы */
var tableRows = 20;
var tableCols = 19;
/* Последняя выбранная ячейка */
var lastSelectedCell;
/* создание таблицы*/
for (var i = 0; i < tableRows; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < tableCols; j++) {
var td = document.createElement('td');
// var input = document.createElement('input');
td.innerHTML = '<input type="text" class=\"input-text\">';
// td.appendChild(input);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
var inputs = tbody.getElementsByClassName('input-text');
/* навешивание события на каждый input */
for (var i = 0; i < inputs.length; i++) {
/* смена цвета при выделении 1 ячейки */
inputs[i].addEventListener('click', function (e) {
if (lastSelectedCell) {
lastSelectedCell.style.backgroundColor = 'white';
}
lastSelectedCell = e.target;
lastSelectedCell.style.backgroundColor = 'rgb(200, 200, 224)';
});
}
/* вычисление начального положения курсора */
tbody.addEventListener('mousedown', function (e) {
/* Убираем действие браузера по умолчанию */
e.preventDefault(); // !!!ПРОБЛЕМА БЫЛА В ЭТОЙ СТРОЧКЕ!!!
isSelect = true;
firstSelectedCell = e.target;
});
.wrapper {
display: flex;
justify-content: center;
flex-direction: column;
}
.input-text {
width: 60px;
height: 20px;
border: 1px solid #999;
}
.input-text:hover {
background-color: #eee;
/* background-color: ; */
}
<div class="wrapper">
<table class="table">
<tbody class="table__body"></tbody>
</table>
</div>
Заранее благодарю за любую помощь.