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

最新推荐文章于 2022-04-27 18:46:50 发布

运真表姐

最新推荐文章于 2022-04-27 18:46:50 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/gdfjhc/article/details/86773959

版权

这篇博客主要展示了如何使用jQuery库来创建一个具有固定表头且内容可滚动的表格，详细介绍了相关实现代码和jQuery的核心概念，包括选择器、事件、属性操作等。

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

                        
    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() + "&nbsp;*&nbsp;" + y + "&nbsp;=&nbsp;" + (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" style="width:400px; height:400px; overflow:scroll">    
  
                           <table id="table_xy" border="1" style="wid

最低0.47元/天解锁文章

运真表姐

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery - 综合实例 - 固定表头，滚动表格内容

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

扫一扫