表单从AJAX响应中删除

I'm trying to add a table row with ajax/jquery that has a form element in it. Everything works just fine if I set it without the ajax, but somehow everything inside the <form> tag is just completely lost.

I'm not sure where I'm losing the form (jquery's .html() is effectively the same as innerHTML right? If that's the case I suspect that's where I'm losing it).

Anyway, here's some code:

var worow = document.getElementById('worow_' + row);
var wotable = document.getElementById('tbl_workorders');

// add a new row to the table underneath our existing row.
var newrow = wotable.insertRow(worow.rowIndex+1);
var x = newrow.insertCell(0);

// set up the row a little bit
x.colSpan = 13;
x.style.padding = '10px';
x.style.backgroundColor = '#ccc';
x.align = "center";

x.innerHTML = '<img src="/images/loading.gif" />';

// a little ajax cuz we're cool that way
$.post("getwotrans.php", 
{
    workorder: row
}, 
function(response)
{

    // set the value of the row = response object from the AJAX
    $(x).html(response);
});

And in getwotrans.php: (paraphrased)

<table>
<thead><tr><td>blahblah</td></tr></thead>
<tbody><form><tr><td><input></td></tr></form></tbody>
</table>

So what happens is I'll run the javascript function to add the row, and the row is added fine and I see the table headers, but the 'form' inside the tbody is just not there.

I had some simliar problem. I used a hidden form and javascript to copy the values of the row clicked to the hidden form elements and then submit the form via javascript. Maybe that's an idea.

What happens when you put the form outside of the table?

<form><table>
<thead><tr><td>blahblah</td></tr></thead>
<tbody><tr><td><input></td></tr></tbody>
</table></form>

Just curious if this will fix the issue or not? It is odd that this would happen without something equally odd to fix it!

a form cannot be a child element of tbody