我可以最好地描述如下:
我想要这个(整个表格在editmode
并保存每一行的按钮)。
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
<td> </td>
</tr>
<tr>
<td><input type="hidden" name="id" value="1" /></td>
<td><input type="text" name="name" value="Name" /></td>
<td><input type="text" name="description" value="Description" /></td>
<td><input type="submit" value="Save" /></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="2" /></td>
<td><input type="text" name="name" value="Name2" /></td>
<td><input type="text" name="description" value="Description2" /></td>
<td><input type="submit" value="Save" /></td>
</tr>
<!-- and more rows here ... -->
</table>
我应该把<form>
标签放在哪里?
你不能。您唯一的选择是将其分成多个表并将表单标记放在其外部。您最终可能会嵌套表格,但不建议这样做:
<table>
<tr><td><form>
<table><tr><td>id</td><td>name</td>...</tr></table>
</form></td></tr>
</table>
我会完全删除表格,并用样式的html元素替换它,如div和span。
值得一提的是,在HTML5中可以使用输入元素的“form”属性:
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
<td> </td>
</tr>
<tr>
<td><form id="form1"><input type="hidden" name="id" value="1" /></form></td>
<td><input form="form1" type="text" name="name" value="Name" /></td>
<td><input form="form1" type="text" name="description" value="Description" /></td>
<td><input form="form1" type="submit" value="Save" /></td>
</tr>
<tr>
<td><form id="form2"><input type="hidden" name="id" value="1" /></form></td>
<td><input form="form2" type="text" name="name" value="Name" /></td>
<td><input form="form2" type="text" name="description" value="Description" /></td>
<td><input form="form2" type="submit" value="Save" /></td>
</tr>
</table>
虽然它缺乏JS并且使用原始元素,但不幸的是,这在IE10中不起作用。
我有一个类似的问题和this answer问题HTML: table of forms?为我解决了它。 (不确定它是否是XHTML,但它可以在HTML5浏览器中运行。)
您可以使用css为其他元素提供表格布局。
.table { display: table; }
.table>* { display: table-row; }
.table>*>* { display: table-cell; }
然后使用以下有效的html。
<div class="table">
<form>
<div>snake<input type="hidden" name="cartitem" value="55"></div>
<div><input name="count" value="4" /></div>
</form>
</div>
我会说你可以,虽然它没有验证,Firefox会重新安排代码(所以你在使用Web Developer时在'查看生成的源'中看到的内容可能会令人惊讶)。我不是专家,而是推杆
<form action="someexecpage.php" method="post">
就在前面
<tr>
然后使用
</tr></form>
在行的末尾肯定提供功能(在Firefox,Chrome和IE7-9中测试)。为我工作,即使它产生的验证错误的数量是一个新的个人最好/最差!没有看到任何问题,我有一个相当重的风格的表。我想你可能有一个动态生成的表,就像我一样,这就是为什么解析表行对我们凡人来说有点不明显。所以基本上,在行的开头打开表单,并在行结束后关闭它。
你只需要将<form ... >
标签放在<table>
标签和</form>
的末尾。
希望能帮助到你。
事实上,我在表的每一行上都有一个表单的问题,使用javascript(实际上是jquery):
就像Lothre1所说的那样,“渲染过程中的一些浏览器会在声明之后立即关闭表单标签,将输入留在元素之外”
这使我的输入字段OUTSIDE形式,因此我无法通过DOM使用JAVASCRIPT访问我的表单的子项。
通常,以下JQUERY代码将不起作用:
$('#id_form :input').each(function(){/*action*/});
// this is supposed to select all inputS
// within the form that has an id ='id_form'
但上面的示例不适用于呈现的HTML:
<table>
<form id="id_form"></form>
<tr id="tr_id">
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</table>
我仍然在寻找一个干净的解决方案(虽然使用TR'id'参数来解决DOM会解决这个特定的问题)
脏解决方案(对于jquery):
$('#tr_id :input').each(function(){/*action*/});
// this will select all the inputS
// fields within the TR with the id='tr_id'
上面的例子会起作用,但它并不是真的“干净”,因为它指的是TR而不是FORM,它需要AJAX ......
编辑:jquery / ajax的完整过程将是:
//init data string
// the dummy init value (1=1)is just here
// to avoid dealing with trailing &
// and should not be implemented
// (though it works)
var data_str = '1=1';
// for each input in the TR
$('#tr_id :input').each(function(){
//retrieve field name and value from the DOM
var field = $(this).attr('name');
var value = $(this).val();
//iterate the string to pass the datas
// so in the end it will render s/g like
// "1=1&field1_name=value1&field2_name=value2"...
data_str += '&' + field + '=' + value;
});
//Sendind fields datawith ajax
// to be treated
$.ajax({
type:"POST",
url: "target_for_the_form_treatment",
data:data_string,
success:function(msg){
/*actions on success of the request*/
});
});
这样,“target_for_the_form_treatment”应该接收POST数据,好像表单是发送给他的(appart来自post [1] = 1,但为了实现这个解决方案我会建议处理data_str的尾随'&') 。
我仍然不喜欢这个解决方案,但由于dataTables jquery插件,我不得不使用TABLE结构...
如果你试图添加一个像这样扭曲tr元素的表单
<table>
<form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</form>
</table>
渲染过程中的某些浏览器会在声明后立即关闭表单标记,从而将输入留在元素之外
这样的事情
<table>
<form></form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</table>
此问题仍然适用于扭曲多个表格单元格
正如上面提到的stereoscott,嵌套表是一种可能的解决方案,不推荐使用。避免使用表格。
我迟到了,但这对我很有用,代码应该解释自己;
<script type="text/javascript">
function formAJAX(btn){
var $form = $(btn).closest('[action]');
var str = $form.find('[name]').serialize();
$.post($form.attr('action'), str, function(data){
//do stuff
});
}
<script>
HTML:
<tr action="scriptURL.php">
<td>
Field 1:<input type="text" name="field1"/>
</td>
<td>
Field 2:<input type="text" name="field2" />
</td>
<td><button type="button" onclick="formAJAX(this)">Update</button></td>
</tr>