html之table之多个tbody

最新推荐文章于 2024-05-11 11:28:36 发布
最新推荐文章于 2024-05-11 11:28:36 发布
阅读量2.4k 收藏
点赞数
分类专栏： <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]


--
iteye_3352
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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>`标签来构建一个简单的网页布局，这对于初学者或者刚接触网页设计的人来说是非常有价值的。尽管现代网页设计倾向于使用更灵活的...
在Table使用多个tobody来实现部分行的显示与隐藏
yangsj19870829的博客
07-16 747
    项目开发过程中  需要根据用户点击的超链接来显示/隐藏 table中的部分行。  对前台不是很熟悉， 考虑用div嵌套tr来做，结果不行。  上网一搜  发现div  要买嵌套整个table  要么放在td的里面， 才会有效。   后面在table用了多个tbody来现实该功能。     一个table可以包涵多个tbody。 ...
html中table中加body,html – 我们可以在同一个table中有多个tbody吗？
weixin_39724004的博客
05-31 829
是的，你可以使用它们，例如我使用它们更容易地风格的数据组，如下所示：CustomerOrderMonthCustomer 1#1JanuaryCustomer 1#2AprilCustomer 1#3MarchCustomer 2#1JanuaryCustomer 2#2AprilCustomer 2#3MarchCustomer 3#1JanuaryCustomer 3#2AprilCustom...
2024年6个最佳 Python 网页爬虫库（非常详细）零基础入门到精通，收藏这一篇就够了
最新发布
leah126的博客
05-11 2484
Selenium.5. Scrapy.6. urllibSeleniumSelenium 是一个广泛使用的 Python 抓取库，用于抓取动态 Web 内容。它通过单击按钮、填写表格等来模仿人类交互。Selenium 与许多浏览器兼容，例如 Chrome 和 Firefox，允许您选择最适合您的网络抓取项目的浏览器。这种灵活性有助于确保在不同的浏览器环境中获得一致的结果。👍 优点： 它可以抓取动态网页。多浏览器支持。👎 缺点：Selenium可能很慢。它无法获取状态代码。这既费时又费力。
javascript table的多个tbody操作函数
yanleigis的专栏
11-24 4022
javascript table的tbody操作函数以下函数主要用于，一个table中有多个 tbody by yanleigis  email:landgis@126.com 2008.11.24//获得一个table中tbody的个数function getbodynum(tableid){ var tbody=document.getElementsByTagName(TBODY
一个表格中可以有多个tbody ，可以控制隐藏某个tbody
limlimlim的专栏
05-27 1万+
一个表格中可以有多个tbody ，可以通过style="display:noe"来控制隐藏当前tbody 举例: 课程表 周一 周二 周三 html net javascript html加强 net高级技术 javascript Dom 晚自习
html 隐藏tbody,html中并没有TBODY标签，为什么程序测试后发现有这么一个标签
weixin_39627661的博客
06-04 300
new document window.onload = function(){Highlight();}function addOne(obj){var tbody = document.getElementById('table').lastChild;var tr = document.createElement('tr');var td = document.createElement(...
html 可以多个body,同一张<table>中可以有多个<tbody>吗？
weixin_32204241的博客
06-10 1742
我创建了一个JSFiddle，其中有两个带表的嵌套ng-repeats，以及在tbody上的父ng-repeat。如果检查表中的任何行，您将看到有六个tbody元素，即父级。的HTMLStore IDNameAddressCityCostSalesRevenueEmployeesEmployees H-sum{{storedata.store.storeId}}{{storedata.store....
FormTable_html_Table_
09-28
在网页设计领域，HTML（HyperText Markup Language）是构建网页内容的基础语言，它定义了网页的结构和样式。...在"FormTable_html_Table_"这个主题中，你将深入学习到这些知识，并通过实例来提升你的技能。
Bootstrap Table中的多选框删除功能
10-18
表格中通常包含多个带有复选框的行，用户可以通过勾选这些复选框来选择要删除的记录。 ```html <table id="table" data-toggle="table"> <th data-field="state" data-checkbox="true"></th> <!-- 其他列头 -...
html学习之河畔林语
10-07
这有助于创建复合式的网页设计，将多个页面内容整合在一起。 5. **资源引用**：HTML文件可以链接到外部CSS（Cascading Style Sheets）和JavaScript文件，以实现样式控制和交互性。例如，使用`<link>`标签引入CSS...
页面中有<tbody>标签，自以为是更好的规范<table>标签的
路在脚下
05-12 1219
每个表格可以有一个表头、一个表尾和一个或多个表体，分别以THEAD、TFOOT和TBODY元素表示。 用TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处（基于用户心理吧）加上和，比如：          表体1       表体1             表体2       表体2
在html语言中建立2个表格,dom操作表格示例(dom创建表格)
weixin_39617484的博客
06-01 604
一、使用HTML标签创建表格：复制代码代码如下:人员表姓名性别年龄张三男20李四女22合计：Nthead、tfoot、caption标签在一个表格中只能有一个tbody、tr、td、th标签在一个表格中可以有N个二、使用DOM创建表格标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建生成它，或者HTMLDOM来操作它。(HTMLDOM提供了更加方便快捷的方式来操作HTML)复制代码代码如...
用thead、tbody、tfoot实现漂亮的table布局
leng0920的博客
09-09 1977
//本文纯属复制，如有侵权，请告知删除，谢谢。。。 css案例学习之用thead、tbody、tfoot实现漂亮的table布局 首先说说thead、tbody、tfoot 无论前后顺序如何改变， 内的元素总是在表的最上面， 总在表的最下面 效果 代码如下 "-//W3C//DTD XHTML 1.0 Transitio
HTML表格
drawlessonsfrom的博客
03-17 522
表格一、基本结构二、完整结构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 tbody接收数据,html tbody标签怎么用
06-06
HTML中的`<tbody>`标签通常用于将表格的内容分组。可以在`<table>`标签中使用`<tbody>`标签来创建多个表格行组，并且可以在每个`<tbody>`标签中添加任意数量的表格行`<tr>`，以便更好地组织表格的内容。 要向`<tbody>`标签中添加数据，可以使用JavaScript或其他编程语言来动态生成HTML代码，然后将其插入到表格中。例如，可以使用jQuery的`append()`方法将新的表格行添加到`<tbody>`标签中，如下所示： ```html <table> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody id="myTableBody"> <tr> <td>John</td> <td>25</td> </tr> <tr> <td>Jane</td> <td>30</td> </tr> </tbody> </table> ``` ```javascript // 获取<tbody>元素 var tbody = document.getElementById("myTableBody"); // 添加新的表格行 var newRow = '<tr><td>Bob</td><td>40</td></tr>'; $(tbody).append(newRow); ``` 这样就可以向表格中添加新的数据行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值