我有两个表,一个是仅包含表头的表,另一个表包含所有表数据。这两个表都在各自独立的div中。我正在尝试使其在表数据div上水平滚动将触发JavaScript中的一个事件,该事件将以相同的速率滚动表头div。我知道我可以摆脱div,而只有一张带有粘性标头的表,但是我想尝试这样做。这是我认为可以使用的简化代码:
HTML:
<div id = "div1">
<table id = "stickyheaders" class = "table table-condensed table-striped small">
<thead><tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
<th>header6</th>
<th>header7</th>
<th>header8</th>
<th>header9</th>
<th>header10</th>
</tr></thead>
</table>
</div>
<div id = "div2">
<table id = "tablebody" class = "table table-condensed table-striped small">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
<td>data7</td>
<td>data8</td>
<td>data9</td>
<td>data10</td>
</tr>
</tbody>
</table>
</div>
JavaScript:
$(document).ready(function() {
$('#div2').on('scroll', function () {
$('#').scrollLeft($(this).scrollLeft());
});
} )();
这是小提琴
我在这里想念一些愚蠢的东西吗?在此先感谢您的帮助。我知道这与此处提出的另一个问题类似,但是没有答案,也没有真正帮助我。
您缺少核心的滚动内容。用$('#')
右侧的替换id
并删除()
最后的。是的,添加jQuery:
$(document).ready(function() {
$('#div2').on('scroll', function() {
$('#div1').scrollLeft($(this).scrollLeft());
});
});
#div1 {
width: 50%;
height: 40px;
padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 5px;
overflow-y: auto;
overflow-x: auto;
label {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: auto;
clear: both;
}
}
#div2 {
width: 50%;
height: 50px;
padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 5px;
overflow-y: auto;
overflow-x: auto;
label {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: auto;
clear: both;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<table id="stickyheaders" class="table table-condensed table-striped small">
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
<th>header6</th>
<th>header7</th>
<th>header8</th>
<th>header9</th>
<th>header10</th>
</tr>
</thead>
</table>
</div>
<div id="div2">
<table id="tablebody" class="table table-condensed table-striped small">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
<td>data7</td>
<td>data8</td>
<td>data9</td>
<td>data10</td>
</tr>
</tbody>
</table>
</div>
在底部div上滚动将滚动顶部的div。将jQuery添加到jsFiddle中。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句