Question

我必须创建一个包含单元格的表格，通过单击我必须为参数提供一些取决于所有单击单元格的值

如果它是单个单元格，我可以通过点击jquery中的函数来完成。但是，用户可以选择多个单元格，作为回报，如果所选单元格彼此相邻，则应更新参数，并且如果所选单元格不相邻，则应提示用户。

这似乎很复杂。我如何在jQuery中实现这一目标？

更新

此表是一个类似应用程序的日历，其中时间和地点为行和列。连续的每个单元格表示1小时的时间段。用户可以选择多个1小时的时隙，可以制作一个更大的插槽（比如一个3小时的插槽），以便在表格中创建一个跨越这个时隙的事件。

Answer 1

对于左侧和右侧的表格单元格，您可以使用jQuery的函数.next()和.prev()：

var adjacent; // Stores an adjacent node, if it exists
if (adjacent = this.next()) { // Returns false if it doesn't exist
    // Process the next sibling of the current cell
}
...

对于顶部和底部的表格单元格，您需要首先获取当前单元格的索引值，然后检查单元格的父级兄弟姐妹是否有相同的表格单元索引（假设您有一个没有多行的简单表格结构或 - 列单元格）：

var index = this.index();
if (adjacent = this.parent().prev().get(index)) {
    // Process the top sibling of the current cell
}

Answer 2

这是一个非常好的工作示例。您可以监视鼠标向下/向上事件，以确定用户将鼠标拖过的单元格。然后添加一个类，以便您知道它们是哪些。另外，您将一个类添加到父行。

然后当鼠标出现时，检查是否已激活多行。如果是这样，则tr.active将大于1。

http://jsfiddle.net/mrtsherman/bCcbZ/

var mousedown = false;

$(document).mousedown(function() {
    mousedown = true;
});

$(document).mouseup(function() {
    mousedown = false;
    if ($('tr.active').length > 1) {
        alert('separate rows');
    }
    else { alert('same row'); }

    $('.active').removeClass('active');
});

$('td').mousedown(function() {
    $(this).addClass('active').parent().addClass('active');
});

$('td').mouseover(function() {
    if (mousedown) {
        $(this).addClass('active').parent().addClass('active');
    }
});

事件在jQuery中相互依赖

2 个答案: