Hello,
Basically I have a html table with a bunch of data from a database (MySQL).
I would like to be able to press on a link and have the a given table row slide down to expand into the editing zone.
I would use Ajax to populate that editing space with the detail data from the database.
So this would be my table:
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Value</th>
<th>Edit</th>
</tr>
<tr>
<td>1</td>
<td>House</td>
<td>5000</td>
<td><a href="">Edit</a></td>
</tr>
<tr>
<td>2</td>
<td>Dog</td>
<td>2000</td>
<td><a href="">Edit</a></td>
</tr>
<tr>
<td>3</td>
<td>Cat</td>
<td>1000</td>
<td><a href="">Edit</a></td>
</tr>
</table>
If I wanted to change an entire row of my table using Ajax, I can't just put a div around the tr tag because that just doesn't work. I need to but a div around all my td tags. I really just want a normal for to appear in the table row without the row separations, a bit in this style:
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Value</th>
<th>Edit</th>
</tr>
<tr>
<td colspan="4">
<div id="row_1">
<form method="post" action="" >
<input type="hidden" name="ID" value="1">
<table>
<tr>
<td>Name</td>
<td>
<input type="text" name="Name" value="House" />
</td>
</tr>
<tr>
<td>Value</td>
<td>
<input type="text" name="Value" value="5000" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" />
</td>
</tr>
</table>
</form>
</div>
</td>
</tr>
<tr>
<td><div id="row_2_id">2</div></td>
<td><div id="row_2_name">Dog</div></td>
<td><div id="row_2_value">2000</div></td>
<td><div id="row_2_edit"><a href="">Edit</a></div></td>
</tr>
<tr>
<td><div id="row_3_id">3</div></td>
<td><div id="row_3_name">Cat</div></td>
<td><div id="row_3_value">1000</div></td>
<td><div id="row_3_edit"><a href="">Edit</a></div></td>
</tr>
</table>
I already have an idea about how to do the whole sliding thing. But I'm having difficulty with is the whole replacing an entire row of a table using ajax. Anybody have an idea of what to do, where to place the divs to take care of that whole business.
Thanks for your input.
Phil