Question

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

我想这样做，以便划分这两个元素的区域是可移动的（例如，你可以通过用鼠标移动它来决定你最想看哪一个）。

这可能吗？如果是这样，怎么样？

Answer 1

FIDDLE：http://jsfiddle.net/DUx7A/

这可能有点hacky，您必须根据需要设置#scroller元素的样式

<强> CSS

/ *所有旧的CSS和* /

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

<强> HTML

在你的2 tbodys之间插入

<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;
    };

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

1 个答案: