如何使两个 tbody 元素之间的分隔线可移动答案

【问题标题】：How to make the divider between two tbody elements moveable如何使两个 tbody 元素之间的分隔线可移动
【发布时间】：2014-03-05 07:51:47
【问题描述】：

我有一个表格，上面有两个可滚动的 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 {}

我想让分隔两个元素的区域是可移动的（例如，您可以通过用鼠标移动来决定最想看到哪一个）。

这可能吗？如果有，怎么做？

【问题讨论】：

这里的一些选项看起来很有希望：stackoverflow.com/questions/6156182/…

标签： javascript jquery html css

【解决方案1】：

小提琴：http://jsfiddle.net/DUx7A/

这可能有点 hacky，您必须根据自己的喜好设置 #scroller 元素的样式

CSS

/*你所有的旧 CSS 和 */

#scroller{
height:10px;
background-color:gray;
cursor:pointer;
}

HTML

在你的两个 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;
    };

【讨论】：

在 IE8 clientX 和 clientY 中返回 null 或不是对象。
在 IE8 中显然你必须获得window.event.clientX / Y 的位置，但修复它似乎只是 IE8 似乎遇到的问题的一小部分！另外，我不相信 IE8 支持可滚动的<tbody>s。
确实如此。另一个问题是，一旦你向下滚动它，你就可以离开容器 div。然后，当你让它向后移动时，整个 div 就会被拉长。 :-)
这肯定是非常初级的。基本结构就在那里，你应该修改它以使其更适合你的目的，并在小提琴中发布结果！