IDEAS: Expanding <tr> to reveal a <form>

Hey everyone, I'm a little new to JS coding but I am trying to design a simple system that I hope you can help me with.

Basically, I want to know which is the best approach to this problem, or a direction where I can find info about it.

The web application I designed uses basic PHP with basic JS and very basic Ajax which populates some divs with MySQL data. I went with a more "Web 2.0" approach instead of having a page for everything; I wanted to create dynamic pages. That's the gist of how the site works... OK.

The issue is I have a table that is populated via a PHP script pulling from a MySQL database. This works fine. What I need is a way (via some clickable region on each <tr> element maybe?) to expand each table "row" to show a form to do some database updates. I don't need the full CRUD, just Read/Update and I am trying to write it as simple as possible.

I do not need help on the form, I just need a direction or suggestion on how to accomplish the act of displaying the form, or call it the "expanding rows which reveal a web form for database interaction".

I have seen some nice Ajax ways, but I am only a beginner when it comes to those techniques and am not in the habit of taking work from other people and using it on something I am creating (and I learn more this way too; the whole "teach a man to fish vs. give a man a fish")

Option#1: What I was thinking was a way to "hide" the form which could already exist on every row, but then "show" it via an expand function?
Option#2: Or maybe a generic hidden div that has the form on it, placed on the next row down when clicked,.. but then how would the form know which row to edit via MySQL?

I think option 1 sounds better.....

Again, I need help on making this form pop up on each table row.

Any help or direction would be greatly appreciated.

Sample code follows:


<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Number</th>
<th>Address</th>
<th>Email</th>
<th>Alt Number</th>
</tr>
</thead>
<tbody>
//<!--Some PHP code that populates all table rows, every row is a row in the database like below-->//
<tr>
<td onclick="javascriptfunction(this)">foo</td>
<td>bar</td>
<td>data</td>
<td>from</td>
<td>MySQL</td>
<td>Database</td>
</tr>
<div id="PopUpForm">
<form id="form_id" name="form_name" action="foo.php" method="post">
<input type="hidden" name="id" value="//<!--Value of MySQL ID-->//"/>
<table title="myTable" style="margin: auto; display:hidden">
<tr class ="theader2"><th colspan="2">TEST TABLE</th>
</tr>
<tr>
<td class="header">Some Field: </td>
<td class="selector"><select name="foo" style="width: 150px;" id="foo">
<option value="" selected="selected">-- Select Value --</option>
<tr>
<input type="submit" value="Submit" class="btn"/>
</form>
</div>
//<!--Some PHP code ends here-->//
</tbody>


Any help would be greatly appreciated =)

Your HTML isn't legal.

You can't have a <div> inside of a <table> unless it is inside of a <td> or <th>.

And your interior table is missing </td> and </tr> tags, and and ...

ANYWAY...actually, you don't even need the <div>.

<tbody>
<tr>
<td onclick="javascriptfunction('hidden1')">foo</td>
<td>bar</td>
<td>data</td>
<td>from</td>
<td>MySQL</td>
<td>Database</td>
</tr>
<tr id="hidden1" style="display: none;">
<td colspan="6">
<form id="form_id" name="form_name" action="foo.php" method="post">
<input type="hidden" name="id" value="//<!--Value of MySQL ID-->//"/>
<table>
<tr class ="theader2"><th colspan="2">TEST TABLE</th>
<tr>
<td class="header">Some Field: </td>
<td class="selector">
<select name="foo" style="width: 150px;" id="foo">
<option value="" selected="selected">-- Select Value --</option>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" class="btn"/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</tbody>

SO then the javascriptfunction can just change that <tr> from display='none' to display='table-row', and voila!

HOWEVER...

That <form> you show *WILL* post to the PHP page and it *WILL* wipe out the entire contents of the current page. Is that really what you are after??? Or did you want to use AJAX to post the form, so that the current page stays on the screen?

Thanks for the response =)

I was planning on the form showing up and then doing the database interaction, then giving user feedback (row added, etc...). Then I would have like the form either going back to hidden, or making the user click to have the form go back to hidden.

As for the illegal HTML, I know I was trying to show a quick example and forgot to add more tags. The reason I add <div> tags to everything that is potentially AJAX is because IE hates inserting block level elements into inline elements, but if I add a <div> tag to it they seem to magically work (got that trick from here at CF )

AJAX would be preferred I presume, especially if that form posts to the same page and wipes out all the data! But doesnt that happen only if you post to the same page as the form? I intended foo.php to be a script on another page to process the form elements into the database.

Thanks for the response =)

The reason I add <div> tags to everything that is potentially AJAX is because IE hates inserting block level elements into inline elements, but if I add a <div> tag to it they seem to magically work (got that trick from here at CF )
That trick would work to add the whole TABLE within a DIV. And in fact IE does not hate inserting block elements into inline element. It is just HTML illegal to nest block elements inside inline elements.

But here we are not talking about block or inline elements when it comes about TABLE or TABLE's elements.

It is about the innerHTML method which you are probably using to "insert" elements. In fact innerHTML is not a standard DOM method, and for IE is even readonly in case of tables. Should you have used DOM methods, no problem would occur.