Menu
I'm trying to create a table where each row is a form. I want that each input is in a different table division, but I still need that for example, all first inputs belong to the same table head and so on.
What I'm trying to do is an editable grid, more or less this:
<table> <tr> <form method="POST" action="whatever"> <td><input type="text"/></td> <td><input type="text"/></td> </form> </tr> <tr> <form method="POST" action="whatever"> <td><input type="text"/></td> <td><input type="text"/></td> </form> </tr> </table> But apparently I cannot arrange the tags in that way (or so is what the w3c validator said).
Any good way to do this?
383
You can have a form inside a table cell. You cannot have part of a table inside a form. Use one form around the entire table. Then either use the clicked submit button to determine which row to process (to be quick) or process every row (allowing bulk updates).
Create an HTML table using the <table> element. Now add the <form> element within this table. Next, we will create form fields. We add the required form fields to the form using the <tr> element that is used to add rows to a table.
Specifically, you can put a table inside a form or vice versa, and it is often useful to do so. But you need to understand what you are doing. Tables and forms can be nested either way. But if you put forms into tables, each form must be completely included into a single table cell (one TD element in practice).
To create a form from a table or query in your database, in the Navigation Pane, click the table or query that contains the data for your form, and on the Create tab, click Form. Access creates a form and displays it in Layout view.
If you want a "editable grid" i.e. a table like structure that allows you to make any of the rows a form, use CSS that mimics the TABLE tag's layout: display:table, display:table-row, and display:table-cell.
There is no need to wrap your whole table in a form and no need to create a separate form and table for each apparent row of your table.
Try this instead:
<style> DIV.table { display:table; } FORM.tr, DIV.tr { display:table-row; } SPAN.td { display:table-cell; } </style> ... <div class="table"> <form class="tr" method="post" action="blah.html"> <span class="td"><input type="text"/></span> <span class="td"><input type="text"/></span> </form> <div class="tr"> <span class="td">(cell data)</span> <span class="td">(cell data)</span> </div> ... </div> The problem with wrapping the whole TABLE in a FORM is that any and all form elements will be sent on submit (maybe that is desired but probably not). This method allows you to define a form for each "row" and send only that row of data on submit.
The problem with wrapping a FORM tag around a TR tag (or TR around a FORM) is that it's invalid HTML. The FORM will still allow submit as usual but at this point the DOM is broken. Note: Try getting the child elements of your FORM or TR with JavaScript, it can lead to unexpected results.
Note that IE7 doesn't support these CSS table styles and IE8 will need a doctype declaration to get it into "standards" mode: (try this one or something equivalent)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Any other browser that supports display:table, display:table-row and display:table-cell should display your css data table the same as it would if you were using the TABLE, TR and TD tags. Most of them do.
Note that you can also mimic THEAD, TBODY, TFOOT by wrapping your row groups in another DIV with display: table-header-group, table-row-group and table-footer-group respectively.
NOTE: The only thing you cannot do with this method is colspan.
Check out this illustration: http://jsfiddle.net/ZRQPP/
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
