3

我是 Javascript/JQuery 的新手。我想知道如何修改此处显示的表格单元格突出显示http://jsfiddle.net/Brv6J/并进行修改以允许以方形模式进行选择。

例如，将A, B, C, D, G, H和I视为表格单元格。沿对角线从 A 拖动鼠标到 E 应该选择单元格A,B,D & E

A B C 
D E F 
G H I
4

4 回答 4

16

我之前为日历选择编写了脚本。我希望这对你有帮助。

脚本：

$(function () {
    $("#table td")
        .mousedown(rangeMouseDown)
        .mouseup(rangeMouseUp)
        .mousemove(rangeMouseMove);
});

var dragStart = 0;
var dragEnd = 0;
var isDragging = false;

function rangeMouseDown(e) {
    if (isRightClick(e)) {
        return false;
    } else {
        var allCells = $("#table td");
        dragStart = allCells.index($(this));
        isDragging = true;

        if (typeof e.preventDefault != 'undefined') { e.preventDefault(); } 
        document.documentElement.onselectstart = function () { return false; };
    } 
}

function rangeMouseUp(e) {
    if (isRightClick(e)) {
        return false;
    } else {
        var allCells = $("#table td");
        dragEnd = allCells.index($(this));

        isDragging = false;
        if (dragEnd != 0) {
            selectRange();
        }

        document.documentElement.onselectstart = function () { return true; }; 
    }
}

function rangeMouseMove(e) {
    if (isDragging) {
        var allCells = $("#table td");
        dragEnd = allCells.index($(this));
        selectRange();
    }            
}

function selectRange() {
    $("#table td").removeClass('selected');
    if (dragEnd + 1 < dragStart) { // reverse select
        $("#table td").slice(dragEnd, dragStart + 1).addClass('selected');
    } else {
        $("#table td").slice(dragStart, dragEnd + 1).addClass('selected');
    }
}

function isRightClick(e) {
    if (e.which) {
        return (e.which == 3);
    } else if (e.button) {
        return (e.button == 2);
    }
    return false;
}

CSS：

#table { border:1px solid #ccc; }
#table td { padding:50px; }
#table td.selected { background-color:#ccc; }

HTML：

<table id="table">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
  </tr>
  <tr>
    <td>G</td>
    <td>H</td>
    <td>I</td>
  </tr>
</table>

我在http://jsfiddle.net/5VXDt/1/创建小提琴

可以通过添加单击事件取消选择或选择一个单元格来改进脚本。

于 2012-03-06T07:20:11.027 回答
4

JQuery Selectable可能更符合要求。

于 2012-03-27T18:41:39.540 回答
1

您可以使用 jquery jquery.ui.draggable.js

 $('td').draggable({
    start  : function (event, ui) {
        // highlighting code
     },
     stop : function (event, ui) {
        //restore the highlighting code
     }
});
于 2012-03-06T07:36:32.313 回答
1

为了在选择日历单元格时更加用户友好，我推荐这个eHighLight 插件。一个非常简单且小巧的文档元素高光插件

于 2013-02-09T13:21:26.857 回答