How to mark up a table such that each row is a submittable form?
I need to allow my users to insert new records into my database -- and the inte开发者_如何学JAVArface given to me is a table. When the user completes entering data in all the cellls of the table, they will click that row's "save" button. That button needs to submit the row's field values via POST.
What is the correct mark up for this that is both W3C standards compliant and semantically correct?
A <td> can contain a form, right? And a <td> can span multiple columns? Maybe the rowshould only be a <td> that spans all the columns of the table? Would that work?
You submit the data as an array, then loop through it in your serverside code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CRUD Table</title>
</head>
<body>
<form action="#" method="post">
<table>
<tr>
<td><input name="data[0][name]"/></td>
<td><input name="data[0][lastname]"/></td>
</tr>
<tr>
<td><input name="data[1][name]"/></td>
<td><input name="data[1][lastname]"/></td>
</tr>
</table>
<p><input type="submit" value="Save" /></p>
</form>
</body>
</html>
Have jQuery add another row as soon as you fill in the first one. The only thing you need to watch that you generate a distinct id for each row: data[0], data[1], etc.
you can achieve this using jQuery & AJAX..
say your markup is
<table>
<tr>
<td> <field> </td><td> <field> </td><td> <field> </td><td> <field> </td><td> <field> </td>
</tr>
...
</table>
your jQuery would be like..
// event for every row's button click
$("table tr").filter(".SubmitButton").click(function(){
// this would create the param list of all the fields in the row
var content=$(this).parent().parent().serialise();
// send to server
$.post('url',content,function(){
alert('Row Submitted');
});
});
I would say it's not possible to mix a table with forms in this way. A form cannot contain a row without containing the whole table, and your idea of having one big <td> spanning all the columns makes the table semantically incorrect. You would have a list, not a table, in that case.
You could create a one large form, with the table and all the inputs inside.
Your server can decide which records were supposed to be saved by recognizing the clicked button. (But beware of Internet Explorer - it may still have that bug, by which it sends all the buttons, even if only one has been clicked). However, the amount of data being sent may be pretty large, so maybe you can use a JavaScript somehow? For example to disable the controls which do not belong to the row containing the clicked button?
加载中,请稍侯......
精彩评论