I use javascript to make a table that have rows and columns based on the number of cells of a matrix. I'll try to use a function, but it doesn't recognize the ID that was be created.
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body onload="tableCreate()">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="src/script.js"></script>
</body>
</html>
the first part creates the table, the second part when enter key was released increment the cursor, the third is if the table doesn't contain other rows and the enter key was pressed in the last cell it created a new row
var c = [
['casa', 'casa1', 'casa2'],
['casa3', 'casa4', 'casa5'],
['casa6', 'casa7', 'casa8'],
['casa9', 'casa10', 'casa11'],
];
function tableCreate() {
const body = document.body,
tbl = document.createElement('table');
tbl.setAttribute('id', 'tab_1');
tbl.style.width = '100px';
tbl.style.border = '1px solid red';
for (let i = 0; i < c.length; i++) {
const tr = tbl.insertRow();
for (let j = 0; j < 3; j++) {
const td = tr.insertCell();
var x = document.createElement('INPUT');
x.setAttribute('type', 'number');
x.setAttribute('class', 'username');
td.appendChild(x);
td.style.border = '2px solid yellow';
}
}
document.body.appendChild(tbl);
}
$('.username').focus(function (event) {
console.log('gd');
});
var currentBoxNumber = 0;
$('.username').keyup(function (event) {
if (event.keyCode == 13) {
textboxes = $('input.username');
console.log('o');
currentBoxNumber = textboxes.index(this);
if (textboxes[currentBoxNumber + 1] != null) {
nextBox = textboxes[currentBoxNumber + 1];
nextBox.focus();
nextBox.select();
event.preventDefault();
} else {
const bd = document.body,
tbl = document.getElementById('tab_1');
const tr = tbl.insertRow();
for (let j = 0; j < 3; j++) {
const td = tr.insertCell();
var x = document.createElement('INPUT');
x.setAttribute('type', 'number');
x.setAttribute('class', 'username');
td.style.border = '2px solid green';
td.appendChild(x);
}
bd.appendChild(tbl);
}
return false;
}
});
anyone can help me? thanks
i try to use the function whit some keys, but not recognized the ID