堆栈内存溢出
  繁体   English   中英

通过在特定单元格上拖动鼠标来增加表格行和列的突出显示

[英]Increasing the highlight of table rows & columns by mouse drag on specific cell

 原文  2013-08-21 05:44:01  8   1    javascript/ jquery/ html

问题描述

我想增加表行和列的突出显示。 当我拖动突出显示部分的最后一个单元格时，我想增加行和列及其标题的突出显示。 我使用以下代码突出显示：

HTML代码： 

<table id="table-1">
    <thead>
        <tr>
            <th></th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
            <th>Col6</th>
            <th>Col7</th>
            <th>Col8</th>
            <th>Col9</th>
            <th>Col10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row1</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row3</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row3</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row4</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row5</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row6</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row7</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row8</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row9</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row10</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>

CSS代码： 

.hi_td {background-color:yellow;}
.hi_th {background-color:gray;}
.autofill-cover{
 cursor:crosshair;
 }
table{
user-select:none;
-webkit-user-select:none;
 }

.hi_td.hi_top{
border-top:2px solid blue;
}

.hi_td.hi_bottom{
border-bottom:2px solid blue;
}

.hi_td.hi_left{
border-left:2px solid blue;
}

.hi_td.hi_right{
border-right:2px solid blue;
}

使用Javascript： 

mdown = false;
msel = [
    [],
    []
];
var funcfalse = function () {
    console.log('selsta');
}
var getpos = function (o, i) {
    var o = $(o); // get position of current cell               
    msel[0][i] = o.parent().index(); // set row
    msel[1][i] = o.index(); // set column
    return msel;
}
var modsel = function (o) {
    var numsrt = function (a, b) {
        return a - b;
    }
    var r = getpos(o, 1)[0].slice(0);
    r.sort(numsrt);
    var c = msel[1].slice(0);
    c.sort(numsrt);
    $trs = $('#table-1 tbody tr');
    $('td', $trs).removeClass('hi_td');
    $trs.slice(r[0], r[1] + 1).each(function () {
        $('td', this).slice(c[0] - 1, c[1]).addClass('hi_td');
    });
    $("#table-1 thead tr th").removeClass('hi_th')
        .slice(c[0], c[1] + 1).addClass('hi_th');
    $("#table-1 tbody tr th").removeClass('hi_th')
        .slice(r[0], r[1] + 1).addClass('hi_th');
}
var hover = function (ev) {
    if (mdown) modsel(this);
}
var mo = function (ev) {
    $('td').removeClass('hi_top hi_bottom hi_left hi_right');
    var allHighlighted = $('.hi_td');
    mdown = (ev.type == 'mousedown') ? 1 : 0;
    getpos(this, 1 - mdown);
    if (mdown) {
        modsel(this);
    } else {
        allHighlighted.each(function (i, item) {
            var index = $(item).index();
            console.log(index);
            var b = $("#table-1 td.hi_td:last").addClass("autofill-cover");
            if (!$(item).prev().hasClass('hi_td')) {
                $(item).addClass('hi_left'); //$(item).addClass('hi_right');
            }
            if (!$(item).next().hasClass('hi_td')) {
                $(item).addClass('hi_right');
            }
            if (!$(item).closest('tr').prev().find('td:nth-child(' + (index + 1) + ')').hasClass('hi_td')) {
                $(item).addClass('hi_top');
            }
            if (!$(item).closest('tr').next().find('td:nth-child(' + (index + 1) + ')').hasClass('hi_td')) {
                $(item).addClass('hi_bottom');
            }
        });
    }
}
var $tbl = $("#table-1"),
    $tblHead = $("#table-1 thead tr");
$("tbody td", $tbl)
    .on({
    "mousedown": mo,
    "mouseup": mo,
    "mouseenter": hover,
    "selectstart": funcfalse
});

如何解决这个问题呢？ 我的代码的Jsfiddle链接： http : //jsfiddle.net/RmAqP/31/

1 个解决方案

解决方案1
 1 已采纳  2013-08-21 07:30:03

我已经开始重写某些部分，因此我可以阅读代码并最终根据您的第一个版本重写整个过程。 希望你不要介意。

检查更新的JSFiddle： http : //jsfiddle.net/blvz/MZufz/

HTML （不变） 

<table id="table-1">
    <thead>
        <tr>
            <th></th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
            <th>Col6</th>
            <th>Col7</th>
            <th>Col8</th>
            <th>Col9</th>
            <th>Col10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row1</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row3</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row3</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row4</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row5</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row6</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row7</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row8</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row9</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <th>Row10</th>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>

CSS （稍有变化） 

td.highlighted { background-color: yellow; }
thead th.highlighted:not(:first-child), tbody th.highlighted { background-color: gray; }
.autofill-cover{
    cursor:crosshair;
}
table{
    user-select:none;
    -webkit-user-select:none;
}

td.highlighted.top{
    border-top:2px solid blue;
}

td.highlighted.bottom{
    border-bottom:2px solid blue;
}

td.highlighted.left{
    border-left:2px solid blue;
}

td.highlighted.right{
    border-right:2px solid blue;
}

JavaScript （主要重写） 

var SELECTION_START = 0;
var SELECTION_END = 1;

var selection = [getCellPos(), getCellPos()];

$tbl = $("#table-1");

function startSelection(event) {
    if (event.button === 2) { return false; }

    clearSelectionBorders();
    if (this !== $tbl.find('td.highlighted').last()[0]) {
        setSelection(this, SELECTION_START);
    }
    setSelection(this, SELECTION_END);

    $tbl.find("tr > *").mouseenter(moveSelection);
}

function stopSelection() {
    applySelectionHighlight();
    applySelectionBorders();

    $tbl.find("tr > *").off('mouseenter');
}

function moveSelection() {
    setSelection(this, SELECTION_END);
}

function setSelection(element, position) {
    element = $(element);
    var cellPos = getCellPos(element);
    selection[position] = cellPos;
    applySelectionHighlight();
}

function getCellPos(element) {
    element = $(element);
    if (element.length) return {
        col: element.index(),
        row: element.parent().parent().is($tbl.find('thead')) ? 0 : element.parent().index() + 1
    };
    return {
        row: -1,
        col: -1
    };
}

function getSelectionRect() {
    var rect = {
        x: 0,
        y: 0,
        width: 0,
        height: 0
    };
    rect.x = Math.min(selection[SELECTION_START].col, selection[SELECTION_END].col);
    rect.y = Math.min(selection[SELECTION_START].row, selection[SELECTION_END].row);
    rect.width = Math.max(selection[SELECTION_START].col, selection[SELECTION_END].col) + 1;
    rect.height = Math.max(selection[SELECTION_START].row, selection[SELECTION_END].row) + 1;

    if (rect.x === 0 && rect.width === 1) rect.width = $tbl.find('tr:first-child > *').length;
    if (rect.y === 0 && rect.height === 1) rect.height = $tbl.find('tr').length;

    return rect;
}

function applySelectionHighlight() {
    clearSelectionHighlight();

    var selectionRect = getSelectionRect();
    $tbl.find('thead tr > *').slice(selectionRect.x, selectionRect.width).addClass('highlighted');
    $tbl.find('tr').slice(selectionRect.y, selectionRect.height).each(function () {
        $(this).find('> th:first-child').addClass('highlighted');
        $(this).find('> *').slice(selectionRect.x, selectionRect.width).addClass('highlighted');
    });
}

function clearSelectionHighlight() {
    $tbl.find('tr > *').removeClass('highlighted');
}

function applySelectionBorders() {
    var allHighlighted = $tbl.find('.highlighted');
    allHighlighted.each(function (i, item) {
        var index = $(item).index();
        var b = $tbl.find("td.highlighted:last").addClass("autofill-cover");
        if (!$(item).prev().is('td.highlighted')) {
            $(item).addClass('left');
        }
        if (!$(item).next().is('td.highlighted')) {
            $(item).addClass('right');
        }
        if (!$(item).closest('tr').prev().find('td:nth-child(' + (index + 1) + ')').hasClass('highlighted')) {
            $(item).addClass('top');
        }
        if (!$(item).closest('tr').next().find('td:nth-child(' + (index + 1) + ')').hasClass('highlighted')) {
            $(item).addClass('bottom');
        }
    });
}

function clearSelectionBorders() {
    $tbl.find('td').removeClass('top bottom left right');
}

function clearAll() {
    selection = [getCellPos(), getCellPos()];
    clearSelectionHighlight()
    clearSelectionBorders();
}

$tbl.find("tr > *").mousedown(startSelection);
$(window).mouseup(stopSelection);

$(document).mousedown(function (event) {
    if ($(event.target).parents($tbl).length === 0) clearAll();
});

我希望这可以解决您的问题，或者至少可以帮助您解决问题。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 突出显示悬停行的特定表格单元格 Javascript单击/拖动并选择表行和列 如何在HTML中突出鼠标指针的当前渲染线？ （不是表/行） 如何访问当前表行的特定单元格？ 计算表中具有特定单元格内容的行 使 HTML 表中的整行和列可拖/放？ HTML表格突出显示行，但不突出显示文本 文字：在鼠标悬停时突出显示特定点 用鼠标调整表格列的大小 如何在鼠标悬停时突出显示表格行
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM