I have 2 functions, one that is creating dynamicly a table with input fields, which dimensions are based on a variable k, inserted by the user, and another one that reads the values inserted again by the user in every field of the table and inserts them in a 2 dimensional array that I can call later.
The problem is that the create table function does not work with onBlur inserted in it’s code.
The code is as follows:
<head>
<script>
var k;
function genArray () {
var A = [];
for (var i = 0; i < k; i++) {
A[i] = [];
for (var j = 0; j < k; j++) {
var id = "A" + (i + 1) + (j + 1);
A[i][j] = parseFloat(document.getElementById(id).value);
if (isNaN (A[i][j])) {
alert ('Valoarea 'A[i][j]' nu este un numar. Reintroduceti valoarea');
}
}
}
}
function readGrad() {
k = parseInt(document.getElementById("grad").value);
if (isNaN(k)) {
alert('Gradul introdus nu este intreg, reintroduceti gradul matricii');
}
if (k == 0) {
alert ('Determinantul trebuie sa fie mai mare ca 1');
}
if (k == 1) {
alert ('Determinantul trebuie sa fie mai mare ca 1');
}
return k;
}
function genTable(i,j) {
//var i,j = parseInt(document.getElementById("grad").value);
var myTable = '<TABLE BORDER="1" BORDERCOLOR="BLACK">\n <TBODY>\n';
for (i = 0; i < 1; i++) {
myTable += ' <TR>\n';
for (j = 0; j < k+1; j++) {
myTable += ' <TD>'+j+'</TD>\n';
}
myTable += ' </TR>\n';
}
for (i = 1; i < k+1; i++) {
myTable += ' <TR>\n';
for (j = 0; j < 1; j++) {
myTable += ' <TD>'+i+'</TD>\n';
}
for (j = 1; j < k+1; j++) {
myTable += ' <TD><input class="element" id="A' + i + j + '" onblur="genArray()"></TD>\n';
}
myTable += ' </TR>\n';
}
myTable += ' </TBODY>\n</TABLE>\n';
document.getElementById('container').innerHTML = myTable;
}
</script>
</head>
<body style="background-color: #777; color: ddd;">
<div style="margin: 20px;">
<h1>Program de calculare determinant matrice de orice grad.</h1>
</div>
<div>
Introduceti gradul matricei
<input id="grad" type="text" value="" style="width: 50px;" onChange="readGrad()">
<input style="margin-top: 20px;" type="button" name="Calculate determinant" value="Generati tabel" onClick="genTable()">
</div>
<form name="Det Matrice">
<div style="margin-top: 100px; float: left; width: 100%;">
Introduceti valorile:
<table style="text-align: center;">
<div id="container"></div>
</table>
<br>
</div>
</body>
After correct the syntax error of the alert, genTable() works. But you have logic problem in your code. You add onblur event handler to every text field in the generated table cell. So every cell input will trigger a call to the onblur event handler which will iterate the whole table. I don’t think this is what you want. Besides, during the iteration, your parseFloat function will fail on all the empty cells. You should only trigger one call to genArray() perhaps by using a button.