html之table之多个tbody

最新推荐文章于 2024-08-21 16:53:21 发布
最新推荐文章于 2024-08-21 16:53:21 发布
阅读量2.5k 收藏
点赞数
分类专栏： <html>元素 文章标签： html table tbody mutiple 多个
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_3352/article/details/82672080
版权
[size=large][b]效果图：[/b][/size]


[img]http://dl2.iteye.com/upload/attachment/0119/4756/086f1e04-29eb-3617-975b-a7c24ab0de18.png[/img]


[size=large][b]代码：[/b][/size] 



<!DOCTYPE html>
<html>
<head>

   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>


table, td, th {
    border: 1px solid black; 
    border-top:none;  
}
th{
    border-top: 1px solid black; 
}


th,td{
   width: 100px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
table {
    border-collapse: collapse;
}

th {
    text-align: left;
}
.expand{
  display:block;
  border:1px solid black;
  position:relative;
  float:right;
  margin-right:-53px;
  background-color:#f2f2ff;
  width:50px;
  height:100%;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  cursor:pointer;
  color:#456;
}
.expand:hover{
  color:#888;
}

.tHide{
    display:none;
}

h2>i{
    color:brown;
}
</style>
</head>
<body>

<h2>The <i>tbody</i> Tag</h2>
<p>Use <b><i>multiple</i></b> tbody sections when rules are needed between groups of table rows:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
</table>


<table>
  <tbody>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td>$100
            <span class="expand">Detail</span>
        </td>
     </tr>
  </tbody>
  <tbody class="tHide">
      <tr>
        <td>1.0</td>
        <td>2.0</td>
        <td>3.0</td>        
      </tr>
      <tr>
        <td>2.0</td>
        <td>3.0</td>
        <td>4.0</td>        
      </tr>
  </tbody>
</table>


<table>
  <tbody>
      <tr>
        <td>Lois</td>
        <td>Griffin</td>
        <td>$150<span class="expand">Detail</span></td>
      </tr>
  </tbody>
  <tbody class="tHide">
      <tr>
        <td>1.0</td>
        <td>2.0</td>
        <td>3.0</td>        
      </tr>
      <tr>
        <td>2.0</td>
        <td>3.0</td>
        <td>4.0</td>        
      </tr>
  </tbody>
</table>


<table>
  <tbody>
      <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td>$300<span class="expand">Detail</span></td>
      </tr>
  </tbody>
  <tbody class="tHide">
      <tr>
        <td>1.0</td>
        <td>2.0</td>
        <td>3.0</td>        
      </tr>
      <tr>
        <td>2.0</td>
        <td>3.0</td>
        <td>4.0</td>        
      </tr>
  </tbody>
</table>


<table>
  <tbody>
      <tr>
        <td>Cleveland</td>
        <td>Brown</td>
        <td>$250<span class="expand">Detail</span></td>
      </tr>
  </tbody>
  <tbody class="tHide">
      <tr>
        <td>1.0</td>
        <td>2.0</td>
        <td>3.0</td>        
      </tr>
      <tr>
        <td>2.0</td>
        <td>3.0</td>
        <td>4.0</td>        
      </tr>
  </tbody>
</table>

    <script>

     $(function(){

           $("tbody span.expand").click(function(){

                var tbody = 
                $(this)
                    .parent()  // td
                    .parent()  // tr
                    .parent()  // tbody
                    .siblings('tbody');

                tbody
                    //.slideToggle("slow");
                    //.toggleClass("tHide");
                    .fadeToggle("fast","swing");
           });

     });


    </script>

</body>
</html>





代码二： 




<!DOCTYPE html>
<html>
<head>

   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>


table, td, th {
    border: 1px solid black; 
    border-top:none;  
}
th{
    border-top: 1px solid black; 
}


th,td{
   width: 100px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
table {
    border-collapse: collapse;
}

th {
    text-align: left;
}
.expand{
  display:block;
  border:1px solid black;
  position:relative;
  float:right;
  margin-right:-53px;
  background-color:#f2f2ff;
  width:50px;
  height:100%;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  cursor:pointer;
  color:#456;
}
.expand:hover{
  color:#888;
}

.tHide{
    display:none;
}

h2>i{
    color:brown;
}
</style>
</head>
<body>

<h2>The <i>tbody</i> Tag</h2>
<p>Use <b><i>multiple</i></b> tbody sections when rules are needed between groups of table rows:</p>

<table>
          <thead>
               <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
              </tr>      
          </thead>


          <!-- 1. tbody   -->
          <tbody>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100
                    <span class="expand">Detail</span>
                </td>
             </tr>
          </tbody>
          <tbody class="tHide">
              <tr>
                <td>1.0</td>
                <td>2.0</td>
                <td>3.0</td>        
              </tr>
              <tr>
                <td>2.0</td>
                <td>3.0</td>
                <td>4.0</td>        
              </tr>
          </tbody>


          <!-- 2. tbody   -->
          <tbody>
              <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150<span class="expand">Detail</span></td>
              </tr>
          </tbody>
          <tbody class="tHide">
              <tr>
                <td>1.0</td>
                <td>2.0</td>
                <td>3.0</td>        
              </tr>
              <tr>
                <td>2.0</td>
                <td>3.0</td>
                <td>4.0</td>        
              </tr>
          </tbody>

           <!-- 3. tbody   -->
           <tbody>
              <tr>
                <td>Joe</td>
                <td>Swanson</td>
                <td>$300<span class="expand">Detail</span></td>
              </tr>
          </tbody>
          <tbody class="tHide">
              <tr>
                <td>1.0</td>
                <td>2.0</td>
                <td>3.0</td>        
              </tr>
              <tr>
                <td>2.0</td>
                <td>3.0</td>
                <td>4.0</td>        
              </tr>
          </tbody>


         <!-- 4. tbody   -->
          <tbody>
              <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250<span class="expand">Detail</span></td>
              </tr>
          </tbody>
          <tbody class="tHide">
              <tr>
                <td>1.0</td>
                <td>2.0</td>
                <td>3.0</td>        
              </tr>
              <tr>
                <td>2.0</td>
                <td>3.0</td>
                <td>4.0</td>        
              </tr>
          </tbody>

</table>


    <script>

     $(function(){

           $("tbody span.expand").click(function(){

                var tbody = 
                $(this)
                    .parent()  // td
                    .parent()  // tr
                    .parent()  // tbody
                    .next();

                tbody
                    //.slideToggle("slow");
                    //.toggleClass("tHide");
                    .fadeToggle("fast","swing");
           });

     });


    </script>

</body>
</html>





引用：

[url]http://stackoverflow.com/a/3076721/2893073[/url]

[url]http://www.w3.org/TR/xhtml1/dtds.html[/url]


--
html table 多选框,HTML单选表格和多选表格实现
weixin_35128544的博客
06-03 1203
单选表格1单选表格#id123当前选择: function clickRadio () {console.log(document.querySelector('.radio-table tbody input[type=radio]:checked'))document.getElementById('checked').innerHTML = document.querySelector('....
HTML-table表格详解
主营前端方向，技术栈是vue
11-17 2万+
table表格(结构设置tr行、td列，rowspan纵合并colspan横合并,spacing边距collapse边框合并，thead表头tbody表体tfoot表底，补充)
html中table中加body,html – 我们可以在同一个table中有多个tbody吗？
weixin_39724004的博客
05-31 896
是的，你可以使用它们，例如我使用它们更容易地风格的数据组，如下所示：CustomerOrderMonthCustomer 1#1JanuaryCustomer 1#2AprilCustomer 1#3MarchCustomer 2#1JanuaryCustomer 2#2AprilCustomer 2#3MarchCustomer 3#1JanuaryCustomer 3#2AprilCustom...
javascript table的多个tbody操作函数
yanleigis的专栏
11-24 4049
javascript table的tbody操作函数以下函数主要用于，一个table中有多个 tbody by yanleigis  email:landgis@126.com 2008.11.24//获得一个table中tbody的个数function getbodynum(tableid){ var tbody=document.getElementsByTagName(TBODY
8个Python爬虫高效数据抓取技巧
m0_62283350的博客
08-21 2120
在数据驱动的时代，Python爬虫成为了获取网络数据的重要工具。本文将深入浅出地介绍8个高效的Python爬虫技巧，帮助初学者提升数据抓取能力，从简单的网页内容提取到复杂的动态网站抓取，逐步解锁爬虫高级技能。
一个表格中可以有多个tbody ，可以控制隐藏某个tbody
limlimlim的专栏
05-27 1万+
一个表格中可以有多个tbody ，可以通过style="display:noe"来控制隐藏当前tbody 举例: 课程表 周一 周二 周三 html net javascript html加强 net高级技术 javascript Dom 晚自习
html 可以多个body,同一张<table>中可以有多个<tbody>吗？
weixin_32204241的博客
06-10 1823
我创建了一个JSFiddle，其中有两个带表的嵌套ng-repeats，以及在tbody上的父ng-repeat。如果检查表中的任何行，您将看到有六个tbody元素，即父级。的HTMLStore IDNameAddressCityCostSalesRevenueEmployeesEmployees H-sum{{storedata.store.storeId}}{{storedata.store....
html 隐藏tbody,html中并没有TBODY标签，为什么程序测试后发现有这么一个标签
weixin_39627661的博客
06-04 341
new document window.onload = function(){Highlight();}function addOne(obj){var tbody = document.getElementById('table').lastChild;var tr = document.createElement('tr');var td = document.createElement(...
页面中有<tbody>标签，自以为是更好的规范<table>标签的
路在脚下
05-12 1236
每个表格可以有一个表头、一个表尾和一个或多个表体，分别以THEAD、TFOOT和TBODY元素表示。 用TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处（基于用户心理吧）加上和，比如：          表体1       表体1             表体2       表体2
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <div class=table_box_big> <div class=table_box> <table> <th><div>标题一</div></th> <th><div>...
HTML用table写的一个网页，纯table源码
09-09
在这个"HTML用table写的一个学校首页"示例中，我们可以学习到如何利用HTML的`<table>`标签来构建一个简单的网页布局，这对于初学者或者刚接触网页设计的人来说是非常有价值的。尽管现代网页设计倾向于使用更灵活的...
HTML标签tbody的用法与说明
09-28
每个`<tbody>`可以包含多个行元素，而一个表格可以有多个`<tbody>`元素，每个`<tbody>`代表表格的一个逻辑部分。 举一个简单的例子： ```html <table> 头部1 头部2 头部3 <tbody> 数据1 数据2 ...
thead,tbody,tfoot
xiaolvzi的专栏
08-27 930
写html代码的时候,遇到了Tbody这个标记符,这个标记符是对于表格来说的，每个页面都有head ,body两部分，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。 thead用来放标题之类的东西 tbody放数据本体 tfoot放表格的脚注之类…… 标签使用其本
html表格可以包含多个tbody,得到pandas.read_html（）在HTML表包含多个<tbody>标记时工作...
weixin_33277412的博客
06-17 350
我试图解析在http://www.swiftcodesbic.com找到的表，并使用Pandas自动获取表。在大多数情况下，这是很好的工作，但有一个表中有两个标记，我认为这导致了一个问题。故障表可以找到here。在我用来将html解析为pandas.DataFrame的代码是：pandas.read_html(countryPage.text, attrs={"id":"t2"}, skiprow...
在html语言中建立2个表格,dom操作表格示例(dom创建表格)
weixin_39617484的博客
06-01 644
一、使用HTML标签创建表格：复制代码代码如下:人员表姓名性别年龄张三男20李四女22合计：Nthead、tfoot、caption标签在一个表格中只能有一个tbody、tr、td、th标签在一个表格中可以有N个二、使用DOM创建表格标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建生成它，或者HTMLDOM来操作它。(HTMLDOM提供了更加方便快捷的方式来操作HTML)复制代码代码如...
用thead、tbody、tfoot实现漂亮的table布局
leng0920的博客
09-09 2004
//本文纯属复制，如有侵权，请告知删除，谢谢。。。 css案例学习之用thead、tbody、tfoot实现漂亮的table布局 首先说说thead、tbody、tfoot 无论前后顺序如何改变， 内的元素总是在表的最上面， 总在表的最下面 效果 代码如下 "-//W3C//DTD XHTML 1.0 Transitio
HTML表格
drawlessonsfrom的博客
03-17 555
表格一、基本结构二、完整结构1、表格标题：caption2、表头单元格：th三、语义化四、合并行：rowspan五、合并列：colspan 一、基本结构 在HTML中，一个表格一般由以下3部分组成： 表格：table标签 行：tr标签 单元格：td标签 说明： tr指的是table row（表格行）。td指的是table data cell（表格单元格）。 <table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，
HTML中table标签的跨多行和多列布局方法
热门推荐
weixin_37861326的博客
06-25 3万+
先放一张布局效果效果图在实现这一布局效果时，主要应用了rowspan、colspan跨行和跨列的属性布局。在所跨的行或者列，在其他行或者列中也是占位的。比如：第一项项目基本信息是跨过5行，因此在接下来的4行中，第一列已经是默认被占了，行中的td列是从第二列开始布局；最后一行，项目得分占据6列，因此第二个td实际对应的是该行的第七列。具体实现代码如下：HTML布局代码：&lt;!-- 明细表 --&...
html里用table做一个网页
最新发布
09-17
要使用`<table>`制作网页，你可以按照以下几个步骤： 1. **定义表格**： 开始标记通常是 `<table>`，这将开启一个新的表格元素。例如： ```html <table> ... </table> ``` 2. **表头 (`<thead>`)**： 表头...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值