栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

创建一个HTML表,其中每个TR都是一个FORM

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

创建一个HTML表,其中每个TR都是一个FORM

如果你想要一个“编辑网格”,即像结构的表格,可以让你做任何行的形式,使用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 >    <form  method="post" action="blah.html">        <span ><input type="text"/></span>        <span ><input type="text"/></span>    </form>    <div >        <span >(cell data)</span>        <span >(cell data)</span>    </div>    ...</div>

将整个TABLE封装在FORM中的问题在于,所有表单元素都将在提交时发送(也许是所希望的,但可能不是)。该方法允许您为每个“行”定义一个表单,并在提交时仅发送该行数据。

将FORM标记包裹在TR标记周围(或将TR包裹在FORM周围)的问题在于它是无效的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">

支持display:table,display:table-row和display:table-
cell的任何其他浏览器都应像使用TABLE,TR和TD标记时一样显示CSS数据表。他们大多数都这样做。

请注意,你也可以模仿THEAD,TBODY,通过包装与另一个DIV你行组TFOOT

display: table-header-group
table-row-group
table-footer-group
分别。

注意: 使用此方法不能做的唯一事情就是colspan。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/575530.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号