Create a HTML table where each TR is a FORM

Question

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    lt table gt       lt tr gt           lt form method  POST  action  whatever  gt               lt td gt  lt input type  text   gt  lt  td gt               lt td gt  lt input type  text   gt  lt  td gt           lt  form gt       lt  tr gt       lt tr gt           lt form method  POST  action  whatever  gt               lt td gt  lt input type  text   gt  lt  td gt               lt td gt  lt input type  text   gt  lt  td gt           lt  form gt       lt  tr gt   lt  table gt    But apparently I cannot arrange the tags in that way  or so is what the w3c validator said    Any good way to do this

User · Answer

I second Harmen s div suggestion  Alternatively  you can wrap the table in a form  and use javascript to capture the row focus and adjust the form action via javascript before submit

User · Answer

You may have issues with column width  but you can set those explicitly    lt table gt     lt tr gt       lt td gt          lt form gt            lt table gt              lt tr gt                lt td gt  lt  td gt                 lt td gt  lt  td gt                 lt td gt  lt  td gt                 lt td gt  lt  td gt                 lt td gt  lt  td gt                 lt td gt  lt  td gt               lt  tr gt            lt  table gt          lt  form gt        lt  td gt       lt  tr gt     lt tr gt       lt td gt          lt form gt            lt table gt              lt tr gt                lt td gt  lt  td gt                 lt td gt  lt  td gt                 lt td gt  lt  td gt                 lt td gt  lt  td gt                 lt td gt  lt  td gt                 lt td gt  lt  td gt               lt  tr gt            lt  table gt          lt  form gt        lt  td gt       lt  tr gt     lt  table gt    You may want to also consider making it a single form  and then using jQuery to select the form elements from the row you want  serialize them  and submit them as the form   See  http   api jquery com serialize   Also  there are a number of very nice grid plugins  http   www google com search q jquery grid amp ie utf-8 amp oe utf-8 amp aq t amp rls org mozilla en-US official amp client firefox-a

User · Answer

If all of these rows are related and you need to alter the tabular data ... why not just wrap the entire table in a form, and change GET to POST (unless you know that you're not going to be sending more than the max amount of data a GET request can send).

(That's assuming, of course, that all of the data is going to the same place.)

<form method="POST" action="your_action">
<table>
<tr>
<td><input type="text" name="r1c1" value="" /></td>
<!-- ... snip ... -->
</tr>
<!-- ... repeat as needed ... -->
</table>
</form>

User · Answer

it s as simple as not using a table for markup  as stated by Harmen  You re not displaying data after all  you re collecting data   I ll take for example the question 23 here  http   accessible netscouts-ggmbh eu en developer html fb1 22 5  On paper  it s good as it is  If you had to display the results  it d probably be OK  But you can replace it with     4 paragraphs with a label and a select  option s would be the headers of the first line   One paragraph per line  this is far more simple

User · Answer

I had a problem similar to the one posed in the original question. I was intrigued by the divs styled as table elements (didn't know you could do that!) and gave it a run. However, my solution was to keep my tables wrapped in tags, but rename each input and select option to become the keys of array, which I'm now parsing to get each element in the selected row.

Here's a single row from the table. Note that key [4] is the rendered ID of the row in the database from which this table row was retrieved:

<table>
  <tr>
    <td>DisabilityCategory</td>
    <td><input type="text" name="FormElem[4][ElemLabel]" value="Disabilities"></td>
    <td><select name="FormElem[4][Category]">
        <option value="1">General</option>
        <option value="3">Disability</option>
        <option value="4">Injury</option>
        <option value="2"selected>School</option>
        <option value="5">Veteran</option>
        <option value="10">Medical</option>
        <option value="9">Supports</option>
        <option value="7">Residential</option>
        <option value="8">Guardian</option>
        <option value="6">Criminal</option>
        <option value="11">Contacts</option>
      </select></td>
    <td>4</td>
    <td style="text-align:center;"><input type="text" name="FormElem[4][ElemSeq]" value="0" style="width:2.5em; text-align:center;"></td>
    <td>'ccpPartic'</td>
    <td><input type="text" name="FormElem[4][ElemType]" value="checkbox"></td>
    <td><input type="checkbox" name="FormElem[4][ElemRequired]"></td>
    <td><input type="text" name="FormElem[4][ElemLabelPrefix]" value=""></td>
    <td><input type="text" name="FormElem[4][ElemLabelPostfix]" value=""></td>
    <td><input type="text" name="FormElem[4][ElemLabelPosition]" value="before"></td>
    <td><input type="submit" name="submit[4]" value="Commit Changes"></td>
  </tr>
</table>

Then, in PHP, I'm using the following method to store in an array ($SelectedElem) each of the elements in the row corresponding to the submit button. I'm using print_r() just to illustrate:

$SelectedElem = implode(",", array_keys($_POST['submit']));
print_r ($_POST['FormElem'][$SelectedElem]);

Perhaps this sounds convoluted, but it turned out to be quite simple, and it preserved the organizational structure of the table.

User · Answer

If you can use javascript and strictly require it on your web, you can put textboxes, checkboxes and whatever on each row of your table and at the end of each row place button (or link of class rowSubmit) "save". Without any FORM tag. Form than will be simulated by JS and Ajax like this:

<script type="text/javascript">
$(document).ready(function(){
  $(".rowSubmit").click(function()
  {
     var form = '<form><table><tr>' + $(this).closest('tr').html() + '</tr></table></form>';
     var serialized = $(form).serialize(); 
     $.get('url2action', serialized, function(data){
       // ... can be empty
     }); 
   });
});        
</script>

What do you think?

PS: If you write in jQuery this:

$("valid HTML string")
$(variableWithValidHtmlString)

It will be turned into jQuery object and you can work with it as you are used to in jQuery.

User · Answer

If using JavaScript is an option and you want to avoid nesting tables, include jQuery and try the following method.

First, you'll have to give each row a unique id like so:

<table>
  <tr id="idrow1"><td> ADD AS MANY COLUMNS AS YOU LIKE  </td><td><button onclick="submitRowAsForm('idrow1')">SUBMIT ROW1</button></td></tr>
  <tr id="idrow2"><td> PUT INPUT FIELDS IN THE COLUMNS  </td><td><button onclick="submitRowAsForm('idrow2')">SUBMIT ROW2</button></td></tr>
  <tr id="idrow3"><td>ADD MORE THAN ONE INPUT PER COLUMN</td><td><button onclick="submitRowAsForm('idrow3')">SUBMIT ROW3</button></td></tr>
</table>

Then, include the following function in your JavaScript for your page.

<script>
function submitRowAsForm(idRow) {
  form = document.createElement("form"); // CREATE A NEW FORM TO DUMP ELEMENTS INTO FOR SUBMISSION
  form.method = "post"; // CHOOSE FORM SUBMISSION METHOD, "GET" OR "POST"
  form.action = ""; // TELL THE FORM WHAT PAGE TO SUBMIT TO
  $("#"+idRow+" td").children().each(function() { // GRAB ALL CHILD ELEMENTS OF <TD>'S IN THE ROW IDENTIFIED BY idRow, CLONE THEM, AND DUMP THEM IN OUR FORM
        if(this.type.substring(0,6) == "select") { // JQUERY DOESN'T CLONE <SELECT> ELEMENTS PROPERLY, SO HANDLE THAT
            input = document.createElement("input"); // CREATE AN ELEMENT TO COPY VALUES TO
            input.type = "hidden";
            input.name = this.name; // GIVE ELEMENT SAME NAME AS THE <SELECT>
            input.value = this.value; // ASSIGN THE VALUE FROM THE <SELECT>
            form.appendChild(input);
        } else { // IF IT'S NOT A SELECT ELEMENT, JUST CLONE IT.
            $(this).clone().appendTo(form);
        }

    });
  form.submit(); // NOW SUBMIT THE FORM THAT WE'VE JUST CREATED AND POPULATED
}
</script>

So what have we done here? We've given each row a unique id and included an element in the row that can trigger the submission of that row's unique identifier. When the submission element is activated, a new form is dynamically created and set up. Then using jQuery, we clone all of the elements contained in <td>'s of the row that we were passed and append the clones to our dynamically created form. Finally, we submit said form.

User · Answer

If you need form inside tr and inputs in every td  you can add form in td tag  and add attribute  form  that contains id of form tag to outside inputs  Something like this    lt tr gt     lt td gt       lt form id  f1  gt         lt input type  text  gt       lt  form gt     lt  td gt     lt td gt       lt input form  f1  type  text  gt     lt  td gt   lt  tr gt

User · Answer

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    lt style gt  DIV table        display table    FORM tr  DIV tr       display table-row    SPAN td       display table-cell     lt  style gt       lt div class  table  gt       lt form class  tr  method  post  action  blah html  gt           lt span class  td  gt  lt input type  text   gt  lt  span gt           lt span class  td  gt  lt input type  text   gt  lt  span gt       lt  form gt       lt div class  tr  gt           lt span class  td  gt  cell data  lt  span gt           lt span class  td  gt  cell data  lt  span gt       lt  div gt           lt  div gt    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    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt    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

User · Answer

You can use the form attribute id to span a form over multiple elements each using the form attribute with the name of the form as follows    lt table gt        lt tr gt             lt td gt                  lt form method  POST  id  form-1  action   submit form-1  gt  lt  form gt                  lt input name  a  form  form-1  gt             lt  td gt             lt td gt  lt input name  b  form  form-1  gt  lt  td gt             lt td gt  lt input name  c  form  form-1  gt  lt  td gt             lt td gt  lt input type  submit  form  form-1  gt  lt  td gt        lt  tr gt   lt  table gt

User · Answer

Tables are not meant for this  why don t you use  lt div gt  s and CSS

User · Answer

If all of these rows are related and you need to alter the tabular data ... why not just wrap the entire table in a form, and change GET to POST (unless you know that you're not going to be sending more than the max amount of data a GET request can send).

I cannot wrap the entire table in a form, because some input fields of each row are input type="file" and files may be large. When the user submits the form, I want to POST only fields of current row, not all fields of the all rows which may have unneeded huge files, causing form to submit very slowly.

So, I tried incorrect nesting: tr/form and form/tr. However, it works only when one does not try to add new inputs dynamically into the form. Dynamically added inputs will not belong to incorrectly nested form, thus won't get submitted. (valid form/table dynamically inputs are submitted just fine).

Nesting div[display:table]/form/div[display:table-row]/div[display:table-cell] produced non-uniform widths of grid columns. I managed to get uniform layout when I replaced div[display:table-row] to form[display:table-row] :

div.grid {
    display: table;
}

div.grid > form {
    display: table-row;


div.grid > form > div {
    display: table-cell;
}
div.grid > form > div.head {
    text-align: center;
    font-weight: 800;
}

For the layout to be displayed correctly in IE8:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10" />

Sample of output:

<div class="grid" id="htmlrow_grid_item">
<form>
    <div class="head">Title</div>
    <div class="head">Price</div>
    <div class="head">Description</div>
    <div class="head">Images</div>
    <div class="head">Stock left</div>
    <div class="head">Action</div>
</form>
<form action="/index.php" enctype="multipart/form-data" method="post">
    <div title="Title"><input required="required" class="input_varchar" name="add_title" type="text" value="" /></div>

It would be much harder to make this code work in IE6/7, however.

[html] Create a HTML table where each TR is a FORM

The answer is

Examples related to html

Examples related to webforms

Examples related to html-table

Examples related to web-standards

Tags