`
linvar
  • 浏览: 258980 次
  • 性别: 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 封装组件

    windows Form 下的Table容器控件

    6. **嵌套TableLayoutPanel**:你可以在一个Table控件内部嵌套另一个Table控件,构建复杂的多层布局。 7. **性能优化**:尽管Table控件提供了丰富的功能,但在处理大量子控件时,其性能仍然保持高效,适合大规模的...

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

    在网站开发中,HTML表格(Table)和表单(Form)是构建网页内容和交互的重要元素。本篇主要介绍HTML表格的基础知识,包括如何创建表格、合并单元格以及表格的对齐方式。同时,也会简要提及HTML表单的基础概念。 ...

    用于layui table 自定义列

    其中,layui table是layui框架中的一个核心组件,用于展示数据表格。本教程将深入探讨如何利用layui table实现自定义列,以及如何保存和应用这些自定义模板。 一、layui table组件基础 layui table组件提供了灵活...

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

    在需要校验的数组元素内部,可以再嵌套一个`el-form`组件,将当前遍历的子对象作为`el-form`的`model`。这样,每个子对象的字段就可以直接使用原本的名称作为`prop`,并且能正确触发校验。以下是一个示例代码: ``...

    Python关于 Django 的web- Form 表单验证

    在HTML模板中,使用`{{ form.as_p }}`或`{{ form.as_table }}`展示表单,并通过`{{ form.errors }}`显示错误信息。 综上所述,Django的Form表单验证为Web应用程序提供了一种强大而灵活的方式来处理用户输入,确保...

    ant-design-vue3.x的form表单爬坑.pdf

    这意味着,如果你有一个嵌套字段需要清除验证状态,应该按照数组的方式传递参数,例如:`this.$refs.form.clearValidate(['form', index, 'name'])`。这一点同样没有在官方文档中被充分说明,需要开发者额外注意。 ...

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

    &lt;a-form :form="form" @keyup.enter.native="searchQuery"&gt; (item, index) in formList" :key="index"&gt; &lt;!-- 表单项 --&gt; &lt;!-- 名称 --&gt; &lt;a-form-item&gt; ['equipment[' + index + ']', { ... }]"&gt; &lt;!-- ...

    火狐下table中创建form导致两个table之间出现空白

    标准的HTML规范并不推荐将`&lt;form&gt;`元素嵌套到`&lt;table&gt;`元素内,主要是因为这可能会导致表单的某些行为(如数据提交)不符合预期。尽管现代浏览器通常会处理这类情况,但可能会出现某些特殊情形下的兼容性问题。 ###...

    html标签的嵌套规则介绍

    常见的块级元素包括`&lt;div&gt;`、`&lt;ul&gt;`、`&lt;li&gt;`、`&lt;h1&gt;`到`&lt;h6&gt;`、`&lt;p&gt;`、`&lt;form&gt;`、`&lt;table&gt;`和`&lt;ol&gt;`等。块级元素可以包含内联元素或者其他的块级元素,但需要注意的是,内联元素不能包含块级元素。 内嵌元素...

    HTML5标签嵌套规则详解【必看】

    HTML5标签嵌套规则是构建网页结构的重要组成部分,它规定了不同类型的HTML元素如何相互包含。在HTML5中,元素的分类方式发生了变化,不再基于display属性,而是根据内容模型来划分,使得网页结构更加清晰,有利于...

    HTML tag

    这些标签可以嵌套,形成一个层次结构,构建出网页的文档结构。 例如,`&lt;html&gt;`标签是整个文档的根元素,它包含了`&lt;head&gt;`和`&lt;body&gt;`两个主要部分。`&lt;head&gt;`包含元数据,如页面标题、字符编码等;`&lt;body&gt;`则包含用户...

    vue element table中自定义一些input的验证操作

    `el-table-column`内的`template`标签用于自定义列的显示内容,这里我们嵌套了`el-form-item`来实现验证功能。需要注意的是,每个`el-form-item`都应该有一个对应的验证规则,可以通过`:rules`属性进行动态绑定。 ...

    HTML 总结(已完).docx

    标签与标签之间可以嵌套,但必须正确的嵌套。HTML标签不区分大小写。 HTML的基本结构是:&lt;html&gt;为根标签,包含2大部分:和。定义HTML的头部,一般定义HTML的元信息,包含元素:、等。标签之间定义的是网页的主要...

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

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

    综合项目-HTML5网页设计源码.rar+适合新手练习

    一.定义页眉&lt;header&gt;:在HTML中,我们使用header表示页眉,用来...提高访问权重 在HTML5中,header内部可以包含h1~h6元素,也可以包含hgroup table form nav等元素,但不可内部嵌套footer或另外一个header,只要应该显

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

    在具体实现时,我们使用了Element UI中的组件,如el-table、el-table-column和el-form-item等。这些组件具有丰富的属性和事件,可以满足动态表单和表格生成的需求。此外,还涉及到了一些基本的Vue.js概念,比如循环...

    html自学通(附html语法手册)

    3. **元素嵌套**:HTML元素可以嵌套,比如一个段落内可以包含链接或其他元素,这使得内容层次分明。 4. **样式控制**:虽然HTML主要用于结构,但也可以通过`style`属性对元素的样式进行简单控制,如改变颜色、字体...

    html教程(完整版)

    学习HTML首先需要理解这些基本元素和它们的嵌套结构。 2. **文本格式化**:HTML提供了一系列标签来格式化文本,如`&lt;h1&gt;`到`&lt;h6&gt;`定义标题,`&lt;p&gt;`用于段落,`&lt;em&gt;`表示强调,`&lt;strong&gt;`表示重要性,以及`&lt;a&gt;`用于...

    mysql 一个较特殊的问题:You can't specify target table 'wms_cabinet_form'

    错误消息"You can't specify target table 'wms_cabinet_form' for update in FROM clause"清楚地指出,在同一个UPDATE语句中,你不能先从`wms_cabinet_form`表中选择一些值,然后立即更新这个表。 在原始的UPDATE...

Global site tag (gtag.js) - Google Analytics