我有一个表格，其中有两个可滚动的 tbody 元素，如下所示:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table class="table table-condensed scrollable">
<thead>
<tr>
<th colspan="4">Application and SecurityEvent Log</th>
</tr>
<tr>
<th class="col-md-1 header-row">Time</th>
<th class="col-md-5 header-row">Source</th>
<th class="col-md-6 header-row">Message</th>
</tr>
</thead>
<tbody id="logEventsApp" class="scrollable">
<tr id="13705" class="warning">
<td>10:23</td>
<td>IIS Express</td>
<td>3</td>
<td>null</td>
</tr>
<tr id="13704" class="warning">
<td>10:20</td>
<td>TestLog</td>
<td>4</td>
<td>null</td>
</tr>
</tbody>
<tbody id="logEventsSec" class="scrollable">
<tr id="2345" class="warning">
<td>10:21</td>
<td>Security error</td>
<td>3</td>
<td>null</td>
</tr>
<tr id="142604" class="warning">
<td>10:20</td>
<td>TestLog</td>
<td>4</td>
<td>null</td>
</tr>
</tbody>
</table>
</body>
</html>
使用以下 CSS:
.scrollable table {
border-collapse: collapse;
width: 100%;
}
.scrollable thead {
text-align: left;
display: table;
float: left;
width: 100%;
}
.scrollable thead tr {
display: table-row;
width: 100%;
}
.scrollable tbody {
display: block;
height: 200px;
overflow: auto;
float: left;
width: 100%;
}
.scrollable tbody tr {
display: table;
width: 100%;
}
.scrollable tbody tr {
height: 18px;
}
.scrollable tbody td {
padding: 1px 1px;
}
.scrollable th, td {}
我想把分隔两个元素的区域做成可移动的(例如，你可以用鼠标移动它来决定你最想看哪一个)。
这可能吗？如果是这样，怎么做到的？
最佳答案
fiddle :http://jsfiddle.net/DUx7A/
这可能有点 hacky，您必须根据自己的喜好设置 #scroller 元素的样式
CSS
/*你所有的旧 CSS 和 */
#scroller{
height:10px;
background-color:gray;
cursor:pointer;
}
HTML
将这个插入你的 2 个 tbody 之间
<tbody id=scroller><tr><td colspan=3></td></tr></tbody>
这是JS
document.getElementById('logEventsApp').style.height = document.getElementById('logEventsApp').offsetHeight + 'px';
document.getElementById('logEventsSec').style.height = document.getElementById('logEventsSec').offsetHeight + 'px';
console.log(document.getElementById('logEventsApp').style.height);
tracking = false;
document.onmousemove = function(e) {
//console.log(e);
mouseX = e.clientX;
mouseY = e.clientY;
if (tracking === true)
{
document.getElementById('logEventsApp').style.height = logEventsAppHeight - (start - mouseY) + 'px';
document.getElementById('logEventsSec').style.height = logEventsSecHeight + (start - mouseY) + 'px';
}
};
document.getElementById('scroller').onmousedown = function() {
tracking = true;
start = mouseY;
logEventsAppHeight = parseInt(document.getElementById('logEventsApp').style.height);
logEventsSecHeight = parseInt(document.getElementById('logEventsSec').style.height);
};
document.getElementById('scroller').onmouseup = function() {
tracking = false;
};
关于javascript - 如何使两个 tbody 元素之间的分隔线可移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21635588/