分别控制表格每列对齐方式(jQuery)

function flushleft(){//给表格的第一行加CLASS=flush_left其下所有都局左对齐
      $('.flush_left').parent().find('th').each(function(i){
         if($(this).attr('class')=='flush_left'){
         $(this).parents().parent().find('tr').each(function(){
            $(this).find('td').eq(i).css('text-align','left')
         })
         };
      });
   }
   function flushright(){//给表格的第一行加CLASS=flush_left其下所有都局右对齐
      $('.flush_right').parent().find('th').each(function(i){
         if($(this).attr('class')=='flush_right'){
         $(this).parent().parent().find('tr').each(function(){
            $(this).find('td').eq(i).css('text-align','right')
         })
         };
      });
   }
   function flushcenter(){//给表格的第一行加CLASS=flush_left其下所有都局中对齐
      $('.flush_center').parent().find('th').each(function(i){
         if($(this).attr('class')=='flush_center'){
         $(this).parent().parent().find('tr').each(function(){
            $(this).find('td').eq(i).css('text-align','center')
         })
         };
      });
   }

说明:以上三个函数分别控制表格各列居左、居右、居中。需在jQuery环境下使用。因为只是定义了函数所以使用时还需要执行各函数。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要创建一个可以滑动的表格并固定第一,您可以使用HTML、CSS和JavaScript结合实现。具体步骤如下1. 创建一个具有固定表头和固定第一表格,并将其放置在一个可滚动的div容器内。 2. 使用CSS将表格的第一设置为固定定位,并将其左侧的边框设置为与表头对齐。 3. 使用jQuery监听滚动事件,并将表头的位置设置为固定在容器的顶部,将第一的位置设置为固定在容器的左侧。 下面是一个示例代码: HTML: ``` <div class="table-container"> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> <th>Header 7</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> <td>Row 1, Column 4</td> <td>Row 1, Column 5</td> <td>Row 1, Column 6</td> <td>Row 1, Column 7</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> <td>Row 2, Column 4</td> <td>Row 2, Column 5</td> <td>Row 2, Column 6</td> <td>Row 2, Column 7</td> </tr> <!-- more rows --> </tbody> </table> </div> ``` CSS: ``` .table-container { overflow-x: auto; max-width: 100%; } table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; } th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid #ddd; } ``` JavaScript/jQuery: ``` $('.table-container').scroll(function() { var $this = $(this), $th = $this.find('thead th:first-child'), $td = $this.find('tbody td:first-child'); $th.css('left', $this.scrollLeft()); $td.css('top', $this.scrollTop()); }); ``` 请注意,这只是一个示例代码,具体实现方式可能因表格结构和样式而异。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值