`
linvar
  • 浏览: 254240 次
  • 性别: Icon_minigender_1
  • 来自: 未定
社区版块
存档分类
最新评论

html table form嵌套

阅读更多
有这样的需求:
对<table>的每行<tr>单独进行更新,这涉及到form表单
<table><form><tr>.....</tr></form></table>
这种方式不行,因为form只能包含table而不能包含<tr>
这也不是太大问题,因为我们是用jquery, 完全有可能不用form
而在<tr>...</tr>里面使用<input...>等表单
暂时的做法就是
<table>
<tr id="1">
<input type="hidden" name="shopId" />
<td>
<input type="text" name="city" />
</td>
<td>
<input type="button" class="submit" />
</td>
<tr>
<tr id="2">下一行.....</tr>
</table>
通过tr中那个id可以拿到相关行的表单值
$("#1 input[name=shopId]").val();
然后再submit到服务器

!!注意这有个问题是<input type="hidden">这个隐藏域并没有用<td>包裹
这在firefox上没有问题,但在chrome中会有问题,它会将这个隐藏域提出到table之前,
造成使用$("#1 input[name=shopId]").val();的时候拿不到相应的值
所以还是必须用<td><input type="hidden" /></td>
但是这样会占用一列, 使用<td style="display:none">将这列隐藏掉吧
搞掂...
分享到:
评论

相关推荐

    el-table嵌套 el-form并且加正则校验

    el-table 封装组件

    网站开发之HTML基础表格Table和表单Form(三)1

    表格背景的设置它们的基本用法和body一样,这里不再详细介绍。Bgcolor设置背景色Background设置背景图像复杂的网页布局可能需要借助嵌套表格。但是,

    【JavaScript源代码】antd+vue实现动态验证循环属性表单的思路.docx

    antd+vue实现动态验证循环属性表单的思路 ...一个是可动态添加的循环表单form,另一个为普通表单dateForm html &lt;a-form :form="form" @keyup.enter.native='searchQuery'&gt; &lt;div class="dynamic-wrap"&gt; (item,

    vue elementUI 表单校验功能之数组多层嵌套

    在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ...

    H+ 后台主题UI框架v4.1 带文档 未压缩版

    ├── nestable_list.html(嵌套列表) ├── notifications.html(通知 & 提示) ├── pin_board.html(标签墙) ├── plyr.html(视频、音频播放) ├── profile.html(个人资料) ├── project_...

    vue+element创建动态的form表单及动态生成表格的行和列

    主要介绍了vue+element创建动态的form表单及动态生成表格的行和列 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    vue+Element中table表格实现可编辑(select下拉框)

    主要介绍了vue+Element中table表格实现可编辑,实现select下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    html入门到放弃笔记

    1、编写一对 body 标记,在body标记中,嵌套一对 div标记,在 div 标记中 ,嵌套一对 a 标记,在 a标记中,嵌套一对 b 标记,b标记中,随意编写一些文本 &lt;body&gt; 这是一段测试文本 &lt;/body&gt; ...

    从入门到精通HTML5——PDF——网盘链接

     7.1.1 表格的基本构成——table、tr、td 119  7.1.2 表格的标题——caption 120  7.1.3 表格的表头——th 121  7.2 设置表格基本属性 123  7.2.1 表格的宽度——width 123  7.2.2 表格的高度——height...

    ant-design-vue 实现表格内部字段验证功能

    主要介绍了ant-design-vue 实现表格内部字段验证功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    HTML开发王

    9.2.1 创建表格的基本语法(table元素、tr元素、th元素、td元素) 9.2.2 设置表格边框线条宽度(border属性) 9.2.3 设置表格宽度(width属性) 9.2.4 表格在页面中的对齐(align属性) 9.2.5 表格的描述(summary属性) 9.2.6...

    精易web浏览器填表模块-易语言

    el_form_Getaction //表单_取地址,请注意!!程序内部将不会判断是否为表单,m_WebView为0将返回空。 el_form_Setaction //表单_置地址,请注意!!程序内部将不会判断是否为表单,m_WebView为0将返回假。 el_table...

    Vue+Element实现表格编辑、删除、以及新增行的最优方法

    主要为大家详细介绍了Vue+Element实现表格的编辑、删除、以及新增行的最优方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    css笔记课程笔记2019,5,22

    ** &lt;table&gt;&lt;/table&gt; &lt;tr&gt; &lt;td&gt; 5、表单标签 ** &lt;form&gt;&lt;/form&gt; - action method enctype - method: get post ** 输入项 *** 有name属性 * 普通输入项 type="text" * 密码: password * 单选:...

    ORCALE语句大全

    注意formuser是表本来属于哪个用户 touser现在传递给哪个用户 9 表空间 www.2cto.com 创建表空间 create tablespace zhu datafile 'C:\oracle\product\10.2.0\oradata\zhu.dbf' size 50m autoextend on ...

    mysql数据库的基本操作语法

    alter table student add foreign key(classes_name, classes_number) referencesclasses(name, number); 自引用、自关联(递归表、树状表) create table tree( id int auto_increment primary key, name varchar...

    2009达内SQL学习笔记

    1、用法:SELECT columns,prod2,prod3&lt;列&gt; FROM Table1,table2&lt;表名&gt; 分号结束 如: select id from s_emp; select last_name,name from s_emp,s_dept where s_emp.dept_id=s_dept.id;--列表每人所在部门 SELECT...

    freemarker总结

    &lt;table border=1&gt; &lt;tr&gt;&lt;th&gt;Name&lt;th&gt;Price &lt;tr&gt;&lt;td&gt;${being.name}${being.price} Euros &lt;/table&gt; 输出为: &lt;p&gt;We have these animals: &lt;table border=1&gt; &lt;tr&gt;&lt;th&gt;Name&lt;th&gt;Price &lt;tr&gt;&lt;td&gt;...

    JavaScript王者归来part.1 总数2

     13.6.2 一个采用两重table嵌套方式固定表头的例子   13.6.3 可变列宽的实现   13.6.4 标记行--呈现有别于其他行的背景色   13.6.5 小技巧--将代码添加到样式表   13.7 总结   第14章 级联样式表  14.1 ...

Global site tag (gtag.js) - Google Analytics