If I understand well, you want to display 10 more records each time you click i.e. if you had 20 records and click, 10 records should append to the existing.
So this you can do it through innerHtml (on client side) i.e. you take the codes which are between your <table> tag and add the code replied by the server(responseText).
What I mean is this: Populate a
string of the records which you want to add on server side. This string should contain your <tr><td><input type=text id="newCount" value="hereYouMakeTheServerWriteTheDataYouQueried">...
(Also include name and id attribute if you have to use it on client side)
Loop 10 times and make your string variable append each new record.
After looping,
you should get a string which contains all your tags for the rows, the textboxes,value in the textboxes etc.
Then you make the server send this string. When the client receives this string(responseText), you use JS to append the server's reply with the existing code.
Make sure that your table is within a div.
If you don't understand AJAX, this won't be easy to explain you all the steps.
............
There's another alternative to AJAX which is not so nice(because it will require refreshing your page):
Store in a session the number of records.
Make your client request 10 new records:
1) Use the div tag to hide your text box, form. Set your text box value to 10 by default.
2) When you click, a request is sent and the server reads the value in the session.
3)You add this value to 10.Then you return to your page(refresh), read the new session value and Loop this number of times to populate your table.
AJAX is worth learning...
