jQuery 综合实例固定表头滚动表格内容

最新推荐文章于 2022-08-14 22:32:19 发布

我也想冲浪

最新推荐文章于 2022-08-14 22:32:19 发布

阅读量536

点赞数

本文链接：https://blog.csdn.net/yffkjhg/article/details/83782980

版权

这篇博客主要介绍了如何利用jQuery实现固定表头的滚动表格内容功能，结合详细的操作步骤和实例代码，适合初学者学习。同时提到了jQuery的相关资源，包括官方网址、下载地址和论坛链接。

摘要由CSDN通过智能技术生成

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

jQuery - 综合实例 - 固定表头，滚动表格内容

[源代码]

   <html>
       <head>
           <script src="jquery-1.2.js"></script>
           <script>
               $(document).ready(function () {
                   for (var y = 1; y < 20; y++) {
                    $("#table_y").append("<tr style='height: 100px;'><td style='width: 90px;'>" + y.toString() + "</td></tr>");
                       $("#table_xy").append("<tr y='" + y.toString() + "' style='height: 100px;'></tr>");;
                   }
                   for (var x = 1; x < 20; x++) {
                       $("#table_x tr").append("<td style='width: 100px;'>" + x.toString() + "</td>");
                       $("#table_xy tr").each(function (index, element) {
                           var y = $(element).attr("y");
                        $(element).append("<td style='width: 100px;'>" + x.toString() + " * " + y + " = " + (x * y).toString() + "</td>");
                       });
                   }
                   $("#divxy").scroll(function () {
                       $("#divx").get(0).scrollLeft = this.scrollLeft;
                       $("#divy").get(0).scrollTop = this.scrollTop;
                   });
               });
           </script>
       </head>
       <body>
           <table>
               <tr>
                   <td>
                   </td>
                   <td>
                       <div id="divx" style="width:400px; height:100px; overflow:hidden">
                           <table id="table_x" border="1" style="width: 2000px;">
                               <tr style="height: 90px;">
                               </tr>
                           </table>
                       </div>
                   </td>
               </tr>
               <tr>
                   <td>
                       <div id="divy" style="width:100px; height:400px; overflow:hidden">
                           <table id="table_y" border="1">
                           </table>
                       </div>
                   </td>
                   <td>
                       <div id="divxy&

最低0.47元/天解锁文章

我也想冲浪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

jQuery 综合实例 固定表头 滚动表格内容

jQuery - 综合实例 - 固定表头，滚动表格内容

[源代码]

jQuery 综合实例固定表头滚动表格内容