html工作中表格<tbody>标签的使用技巧

在做页面的时候，经常要根据不同的操作来显示或隐藏一个表格中的部分内容，隐藏一行直接用<tr>标签，隐藏多行时用<tbody>就很方便。
<table>
<tbody id="content1">
<tr><td>表单内容</td></tr>
</tbody>
<tbody id="content2" style="display:none">
<tr><td>多行内容</td></tr>
<tr><td>多行内容</td></tr>
</tbody>
</table>
用js来控制样式display来显示和隐藏，很方便。听说这样还可以控制网页加载时显示的顺序，content1会比content2先显示，而不是等表格加载完后一起显示，没有实验过，在表格数据很多时会有作用。

使用过程中发现<tbody>不能嵌套使用，会出现莫名的问题,<tbody>是用来定义表格主体的，定义多个主体不说，主体里再来个主体确实不符合W3C对其的定义，像下面这样使用看起来好像没错，但实际上是有错误的。
<table>
<tbody id="all">
<tbody id="content1">
<tr><td>表单内容</td></tr>
</tbody>
<tbody id="content2">
<tr><td>多行内容</td></tr>
<tr><td>多行内容</td></tr>
</tbody>
</tobdy>
</tbale>

做原型页面时会为了实现交互效果才这样用<tbody>，实际的后台编程中用不着，只要根据判断输出相应的表体就行了。
页面制作时表格的设计用<thead><tbody><tfoot><th><caption>等以前不常用的标签加上CSS的定义可以实现很多不错的效果，标准又语义，很强大，看过相关的一篇文章，找到收藏起来。

赞 (0)

相关推荐

  • html工作中表格&lt;tbody&gt;标签的使用技巧

    在做页面的时候,经常要根据不同的操作来显示或隐藏一个表格中的部分内容,隐藏一行直接用<tr>标签,隐藏多行时用<tbody>就很方便. <table> <tbody id="content1"> <tr><td>表单内容</td></tr> </tbody> <tbody id="content2" style="display:none&qu

  • 工作中常用的js、jquery自定义扩展函数代码片段汇总

    仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]);

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • vue+elementUI中表格高亮或字体颜色改变操作

    重点的代码: :row-style="setRowStyle"这个属性就是在table标签绑定的 :row-style="setRowStyle" // 这个方法直接加到methods里就好了,页面会自动调用的 setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } }, 具体代码: hmtl <el-table width="100%" :data=&

  • 工作中Java集合的规范使用操作详解

    目录 一.前言 二.规范使用Java集合 一.前言 现代软件行业的高速发展对开发者的综合素质要求越来越高,因为不仅是编程知识点,其它维度的知识点也会影响到软件的最终交付质量.比如:五花八门的错误码会人为地增加排查问题的难度:数据库的表结构和索引设计缺陷带来的系统架构缺陷或性能风险:工程结构混乱导致后续项目维护艰难:没有鉴权的漏洞代码容易被黑客攻击等.依据约束力强弱及故障敏感性,规约依次分为[强制].[推荐].[参考]三大类.在延伸的信息中,“说明”对规约做了适当扩展和解释:“正例”提倡什么样的编

  • JavaScript的ExtJS框架中表格的编写教程

    JavaScript的ExtJS框架中表格的编写教程

    ExtJS中表格的特性简介 表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid 表格的列信息由Ext.grid.ColumnModel定义 表格的数据存储器由Ext.data.Store定义,根据解析数据的不同,数据存储器可具体分为如下几种: JsonStore,SimpleStore,GroupingStore- 一个表格的基本编写过程: 1.创建表格列模型 var cm = new Ext.grid.ColumnModel({ {header:

  • 工作中比较实用的JavaScript验证和数据处理的干货(经典)

    在开发web项目的时候,难免遇到各种对网页数据的处理,比如对用户在表单中输入的电话号码.邮箱.金额.身份证号.密码长度和复杂程度等等的验证,以及对后台返回数据的格式化比如金额,返回的值为null,还有对指定日期之前或之后某一天或某一月的计算. 遇到需要对数据及表单验证的,我相信大家都像我一样,喜欢在网上找相关的方法,因为自己写的话,是比较耗时的.今天就给大家分享一下,自己在工作中总结的一些常用 的js. 关键代码如下所示: /** * 验证密码复杂度(必须包含数字字母) * @param str

  • smarty中先strip_tags过滤html标签后truncate截取文章运用

    strip_tags() 函数剥去 HTML.XML 以及 PHP 的标签. 复制代码 代码如下: <?php echo strip_tags("Hello <b>world!</b>"); ?> smarty中可以使用strip_tags去除html标签,包括在< >之间的任何内容. 例如: index.php: 复制代码 代码如下: $smarty = new Smarty; $smarty->assign('articleTi

  • Python实现批量读取word中表格信息的方法

    本文实例讲述了Python实现批量读取word中表格信息的方法.分享给大家供大家参考.具体如下: 单位收集了很多word格式的调查表,领导需要收集表单里的信息,我就把所有调查表放一个文件里,写了个python小程序把所需的信息打印出来 #coding:utf-8 import os import win32com from win32com.client import Dispatch, constants from docx import Document def parse_doc(f):

  • Java反射在实际工作中的应用笔记

    最近工作中遇到一个这样的问题: 为某个项目中的所有接口做一个测试工具,使用java Swing技术,该项目有不同的版本,不是所有版本中的接口都是相同的,而我做的工具需要兼容所有版本. 于是就引入了这样一个问题: 有些接口如果在部分版本中不存在,那么通过界面执行这个操作的时候就会报错,所以为了兼容所有版本,就要在方法调用之前考虑方法是否存在,同时为了不在编译时抛异常,在调用方法时 也需要通过反射来调用,具体实现如下: 一.使用反射判断方法是否存在 /** * 判断方法是否存在 * * @param

随机推荐