使用jquery动态地将表格页脚移动到滚动div的底部

时间：2017-12-13 21:30:56

标签： javascript jquery html scroll html-table

我有一个场景，我必须在滚动div的底部移动表格页脚的每个标签。这是plnkr。

我可以用

硬编码 
$('.sticky-table').find("table tfoot tr.sticky-row th").css('top', 260);

但我想计算260并做到这一点。需要帮助。

2 个答案:

答案 0 :(得分：5)

您需要计算整个容器的底部位置，并从中减去页脚标题和水平滚动条的高度。它将使您获得页脚行th元素的顶部位置。

$('.sticky-table.sticky-headers').offset().top //top of the container
+ $('.sticky-table.sticky-headers').outerHeight() //height of the container (adding it with top gives you the bottom position of the container)
- $('.sticky-table').find("table tfoot tr.sticky-row th").outerHeight(true) //height of the footer headers
- 11 //Fixed height of the scrollbar

创建了更新的plunker。

答案 1 :(得分：2)

这可以通过一些简单的CSS线来实现。这消除了根据jQuery中的高度和位置进行复杂计算的需要，并且如果需要还具有响应的额外好处。

目标是将tfoot元素绝对放在.sticky-table元素的底部。

为此，我们可以为.sticky-table一个position: relative;和tfoot一个position: absolute; bottom: 0;。 

.sticky-table {
  /* ...existing styles */
  position: relative;
}

.sticky-table tfoot {
  position: absolute;
  bottom: 0;
}

像这样：

/* Styles go here */

.sticky-table {
  position: relative;
  max-width: 100%;
  max-height: 500px;
  height: 500px;
  overflow: auto;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 0 !important;
}

.sticky-table table {
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  border-spacing: 0;
}

.sticky-table table tr.sticky-row th,
.sticky-table table tr.sticky-row td {
  background-color: #fff;
  border-top: 0;
  position: relative;
  outline: 1px solid #ddd;
  z-index: 5;
}

.sticky-table table td.sticky-cell,
.sticky-table table th.sticky-cell {
  background-color: #fff;
  outline: 1px solid #ddd;
  position: relative;
  z-index: 10;
}

.sticky-table table tr.sticky-row td.sticky-cell,
.sticky-table table tr.sticky-row th.sticky-cell {
  z-index: 15;
}

.sticky-table tfoot {
  position: absolute;
  bottom: 0;
}

.sticky-table::-webkit-scrollbar {
  width: 0.7em;
  height: 0.7em;
}

.sticky-table::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.sticky-table::-webkit-scrollbar-thumb {
  background-color: #b37e7e;
  outline: 1px solid slategrey;
  border-radius: 5px;
}
<div class="row">
  <div class="col-md-12">
    <div class="sticky-table sticky-headers">
      <table class="table table-striped table-striped">
        <thead>
          <tr class="sticky-row">
            <th>Campaign Name</th>
            <th>Ad Sets</th>
            <th>Ads</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>

          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="sticky-cell">Demo Campaign</td>
            <td class="sticky-cell">100</td>
            <td class="sticky-cell">200</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
          </tr>
          <tr>
            <td class="sticky-cell">Demo Campaign</td>
            <td class="sticky-cell">100</td>
            <td class="sticky-cell">200</td>
            <td>Blue</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>

          </tr>
        </tbody>
        <tfoot>
          <tr class="sticky-row">
            <th class="sticky-cell">Demo Campaign</th>
            <th class="sticky-cell">100</th>
            <th class="sticky-cell">200</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>

          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>

相关问题
最新问题