将输入追加到表的下一行

Question

How can i add an input to the next row in a table, and have it be part of the form that eventually gets submitted? in this case, a row after the address row.

fiddle

$(function(){
       $('#addRow').click(function(){
           $("<tr><td><input type='text' value='' /></td></tr>")
           .attr("id", "city")
           .attr("name", "city")
           .appendTo("#test");
       });
      $('#sub').click(function(){
         var data = $('#test').serialize();
         alert(data);
      });
});


<form id='test' name='test' method='POST' action='#'>
<table align='center'>
<tr>
  <td>
    <input type='button' id='addRow' value='Add'>
  </td>
</tr>
<tr>
  <td>Name:</td>
  <td>
    <input type='text' id='name' name='name'>
  </td>
</tr>
<tr>
  <td>Address:</td>
  <td>
    <input type='text' id='address' name='address'>
  </td>
</tr>
<tR>
  <td>
    <input type='button' id='sub'>
  </td>
</tr>

Answer 1

Well here, you're appending it to the form. That's why the textbox is being thrown at the bottom.

If you want to insert it under the last row, what you want to do is .appendTo the last tr in your table. I would try doing something like:

.appendTo("tr:last");

My assumption is that you want to add another row for a textbox under all the other text boxes. In that case, I would recommend using the .insertBefore command. That way the box goes before the submit button at the bottom. Oh, and you'll also probably want to add a label for that textbox (another td tag in your JQuery).

.insertBefore("tr:last");

See if this helps!