Ale*_*lex 222 html forms firebug html-table
我在HTML表中包含一些表单来添加新行并更新当前行.我得到的问题是,当我在开发工具中检查表单时,我看到表单元素在打开后立即关闭(输入等不包含在表单中).
因此,提交表单不包括字段.
表行和输入如下:
<tr>
<form method="post" action="">
<td>
<input type="text" name="job_num">
</td>
<td>
<input type="text" name="desc">
</td>
</form>
</tr>
Run Code Online (Sandbox Code Playgroud)
任何帮助都会很棒,谢谢.
Que*_*tin 346
形式是不允许是的子元素table,tbody或tr.尝试将其中的一个放在那里将导致浏览器将表单移动到它后面的表格(同时保留其内容 - 表行,表格单元格,输入等 - 后面).
您可以在表单中包含整个表.您可以在表格单元格中放置一个表单.您不能在表单中包含表的一部分.
在整个表格周围使用一个表格.然后使用单击的提交按钮确定要处理的行(快速)或处理每一行(允许批量更新).
Vla*_*mir 176
如果要保存标记,请使用"form"属性:
<form method="GET" id="my_form"></form>
<table>
<tr>
<td>
<input type="text" name="company" form="my_form" />
<button type="button" form="my_form">ok</button>
</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
Mat*_*hew 35
如果你想要一个"编辑网格",即像结构的表格,可以让你做任何行的形式,使用CSS模仿表标签的布局:display:table,display:table-row,和display:table-cell.
无需将整个表包装在表单中,也无需为表的每个明显行创建单独的表单和表.
试试这个:
<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>
Run Code Online (Sandbox Code Playgroud)
将整个TABLE包装在FORM中的问题是任何和所有表单元素都将在提交时发送(可能是期望但可能不是).此方法允许您为每个"行"定义表单,并仅在提交时发送该行数据.
将FORM标记包裹在TR标记(或围绕FORM的TR)周围的问题是它是无效的HTML.FORM仍然允许像往常一样提交,但此时DOM已被破坏.注意:尝试使用JavaScript获取FORM或TR的子元素,这可能会导致意外结果.
请注意,IE7不支持这些CSS表格样式,IE8需要doctype声明才能使其进入"标准"模式:(试试这个或类似的东西)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Run Code Online (Sandbox Code Playgroud)
任何其他支持display的浏览器:table,display:table-row和display:table-cell应该显示你的css数据表,就像你使用TABLE,TR和TD标签一样.大多数人都这样做.
请注意,你也可以模仿THEAD,TBODY,通过包装与另一个DIV你行组TFOOT display: table-header-group,table-row-group和table-footer-group分别.
注意:这个方法唯一不能做的就是colspan.
看看这个例子:http://jsfiddle.net/ZRQPP/
| 归档时间: |
|
| 查看次数: |
326864 次 |
| 最近记录: |