Реализация генератора таблиц

Question

Дано 2 инпута. В первый вводим кол-во строк, во второй кол-во столбцов

<table id="table"></table>
<input id="elem1" type="" name="" >
<input id="elem2" type="" name="">

<script type="text/javascript">



let table = document.querySelector('#table');
let elem1 = document.querySelector("#elem1");
let elem2 = document.querySelector("#elem2"); //первый инпут сделал, но как привязать второй

elem1.addEventListener("keydown", function(event){

if(event.code == "Enter"){
for (let i = 0; i <= elem1.value; i++ ){
    let tr = document.createElement("tr");

for (let i = 0; i <= elem2.value; i++){
    let td = document.createElement("td");
    td.innerHTML = "x";
    tr.appendChild(td);
}   
  table.appendChild(tr);
}
}
});




</script>

Answer 1

Если задача состоит только в создании таблицы, то можно всё изрядно упростить:

function fCreateTable() {
  table.innerHTML = `<tr>${'<td>0</td>'.repeat(+elem2.value)}</tr>`.repeat(+elem1.value);
}

elem1.addEventListener('input', fCreateTable);
elem2.addEventListener('input', fCreateTable);

fCreateTable();

table { border-collapse: collapse; box-shadow: inset 0 0 0 2px #000; } td { padding: 0.5em 1em; box-shadow: inset 0 0 0 1px #000; }

<input id="elem1" type="number" value="2" min="1">
<input id="elem2" type="number" value="2" min="1">
<table id="table"></table>

БЛОГ НА HUSL

Реализация генератора таблиц

Ответы (1 шт):