Question

I’m delevoling an app with phonegap for android and I’m trying to make a FOR loop in javascript with html table rows. I tried using the document.write but all of the content in the page desapears, show just what it’s in the document.write.
The code I have is this one:

<table id="hor-minimalist-b">
<script language=javascript>
for (var i=0; i<3; i++) {
    document.write('<tr>');
        document.write('<td>');
        document.write('<input type="text" name="valor" id="valor" value="key' + i'">');
        document.write('</td>');
        document.write('</tr>');
}
</script>
</table>

Thanks.

Answer 1

It’s because you are just putting text in the page, you need to “create” the element and append them to the table.
You can do it this way:

<table id="hor-minimalist-b"><thead></thead><tbody></tbody></table>
<script language="javascript">
var table = document.getElementById('hor-minimalist-b'); // get the table element
var tableBody = table.childNodes[1]; // get the table body
var tableHead = table.childNodes[0]; // get the table head
for (var i=0; i<3; i++) {
    var row = document.createElement('tr'); // create a new row
    var cell = document.createElement('td'); // create a new cell
    var input = document.createElement('input'); // create a new input
    // Set input properties
    input.type = "text";
    input.id = "valor"; // It's not a good idea (to have elements with the same id..)
    input.name = "valor";
    input.value = "key" + i;
    cell.appendChild(input); // append input to the new cell
    row.appendChild(cell); // append the new cell to the new row
    tableBody.appendChild(row); // append the row to table body
}
</script>

insertRow() and insertCell() will probably work too, but I did not test it yet