How do I create a dynamic HTML table (with JS)?

mie_miauwkes

New member
Hello.

I'd like to know how to create a table that's dynamic. I currently have it statically and it somewhat looks like this:
<table>
<tr>
<td>Domain name: </td>
<td><input type='text' name="domainName"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Criteria: </td>
<td><input type='text' name="criteria1Name"></td>
</tr>
<tr>
<td></td>
<td>Criteria: </td>
<td><input type='text' name="criteria2Name"></td>
</tr>
...
</table

(An example of my current 'static' table can be seen on the project website from me and my colleague-students: http://projecten2.freehostingcloud.com/pg_toevoegen2.php)


A user enters a domain name. When entering text, a new row appears underneath the domain name row and that new row contains an input field for a criteria. When entering text in that criteria textbox, another row appears underneath it, and it's again a row that contains an input field for a criteria. And it goes on like that, until a user presses a button named 'Create next domain'.
When the user presses that button, a new table should be generated underneath the current one with an input field in it for a second domain name. And once again, when entering text in that domain name textfield, a row appears underneath it for the criteria etc etc..

So, the point is that a user must be able to input data (here it's mainly 'criteria', as much as the user wants) and when the user is done with a first domain and all of its criteria, the user must be able to press a button which will result in a newly generated table underneath the first one, with the same possibilities as the first one. It should be coded that an infinite amount of tables can be generated, but to make it easier, I actually only need about 10 tables.

At the end of all these generated tables, the user must be able to press a 'Save' button which will save all the user input to a database.


So, how do I create a table like this? Currently I've created it statically, but I made only 2 tables and it's already a lot of code and a lot of javascript.


You can see an example of what I already have, statically written, in the link I mentioned previously.

Please help me with creating this dynamically. You can tell me the code in HTML, PHP and JavaScript, but I mainly just prefer the HTML and JavaScript part. I currently did everything with the [style:visibility= 'hidden'] and [style:visibility = 'visible'] (without the braces) and that did the trick, but it's not dynamic at all. So please, help me here...


Many, many, many thanks in advance. If you can help me, then I'll thank you endlessly for this. :)
 
Back
Top