javascript - How to allow user to enter elements in an HTML table -

i want allow user enter list of persons in web application, , submit them 1 batch. each row looks this:

<tr>     <td> <input name="person.fname"> </td>     <td> <input name="person.lname"> </td>     <td> <input name="person.birthdate"> </td> </tr> 

the form starts out single row of blank inputs, , want fresh row added list whenever user fills in of fields -- i.e. list grows on demand. likewise, want row disappear whenever user clears fields in it.

what easiest, robust , maintainable way implement this?

finally, how submit table of values server? preferred way name each field server can create list of person entities based on entered values?

if familiar jquery, can use .change handler catch them changing field. test see if it's last row , if there data in it. if have taken out of row, remove it. jquery has great ways this, it's dependent on how want write it. if so, append new row using jquery's .append function. if you're using python , cgi_app , use same name attribute each type of cell, can use form.getlist('fname[]') , return array of names.