添加其他HTML行：放置代码的位置？

Question

I have the following situation:

<table><tr><td width="50">
<select name="angle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td><td>
<input type="text" name="what" value="" />
</td></tr></table>
<a href="">+ Add Row</a>

So, the plan is that when the user first comes to page, they will see 1 row. They will enter the data and click "add row" multiple times to enter all of their data. At a later date, they should be able to come back and edit or remove any of the rows.

My question/problem is: in the javascript, I need to have the full HTML to generate each of the rows or perform an AJAX request to get the new row from the server. On the server I need to have the HTML to generate the rows when the users comes back to edit or do I pass the values using a json array.

I'm wondering what you would do as I'm trying to avoid having the HTML in 2 places. Would you put all the HTML in JS? Or would you put all of the HTML on the server (PHP) and call with AJAX? Or would you just have the HTML in 2 places? (BTW, the case I'm working which has 5 columns and a lot more HMTL.)

I am using: PHP + MySQL + jQuery

Answer 1

In the jquery tutorial you have a nice example you can use to do this.

In the live examples (example C) you have

$("div.contentToChange p:not(.alert)")
  .append("<strong class="addedtext"> This text was just appended to this paragraph</strong>")});

Why instead of the "< strong..." don't you just add a new input row?

As it is a string you're appending you can pretty much with javascript change the name, so you can control it easily.

Like

.append("<input type=\"text\" name=\"row_"+id+"\">.....

I would do it that way :)

This way you'll avoid having to refresh your webpage everytime you add a row. Also you can detect on the php side after the submit how many rows you have, by parsing the "row_id"

Hope it helps

Edit: Answer to the comment and to the rest of the question

I would put all HTML being generated by append, it would make you a bit less load on your server (although not that much) and things would be simple to organize. Oh and you would avoid having the refresh :) (This for the add row)

For rows added that you're loading from the database, then that must be server side.