用鼠标选择表中包含数字的分区并求和值

Selecting Divs in Table that Contain Numbers w/ Mouse and Summing Values

本文关键字：分区 求和 数字 包含 鼠标 选择      更新时间：2023-09-26

所以我有一个表，其中每个td标记都包含一个div标记，该标记在其innerHTML中包含一个数字。当用户按住鼠标左键并在数字之间拖动以选择它们时，我想在选择数字时用数字的总和更新文档中的标签。我想这应该是非常直接的，但在到处搜索后，我不知道如何做到这一点。如有任何帮助，我们将不胜感激。

<table style="cursor: default;" id="">
<tbody>
    <tr>
        <td>
            <div id=“1” class="sequence_div selectable"> 1 </div>
        </td>
        <td>
            <div id=“2” class="sequence_div selectable"> 2 </div>
        </td>
        <td>
            <div id=“3” class="sequence_div selectable"> 3 </div>
        </td>
        <td>
            <div id=“4” class="sequence_div selectable"> 4 </div>
        </td>
        <td>
            <div id=“5” class="sequence_div selectable"> 5 </div>
        </td>
    </tr>
</tbody>

不确定拖动选择位，所以我假设选择是由click(或mousedown(完成的，但更改事件以适应。选定的td将具有类别.selected:

$('td').on('click', function() {
    $(this).toggleClass('selected');
    var sum = parseInt($('#sum').text()) || 0;
    var val = parseInt($(this).find('.sequence_div').text());
    if($(this).hasClass('selected'))
        $('#sum').text(sum + val);
    else
        $('#sum').text(sum - val);
});

如果td只包含带数字的div，则可以省略.find('.sequence_div')位。

jsfiddle演示

编辑：

$(document).mousedown(function() {
    $('td').bind('mouseover',function(){
        $(this).toggleClass('selected');
        var sum = parseInt($('#sum').text()) || 0;
        var val = parseInt($(this).find('.sequence_div').text());
        $(this).hasClass('selected') ? $('#sum').text(sum+val) : $('#sum').text(sum-val);
    });
})
$(document).mouseup(function() {
    $('td').unbind('mouseover');
});

jsfiddle演示

编辑#2：

如果你想让一个新的mousedown在开始时触发一个新选择，你可以有这样的东西：

$(document).mousedown(function() {
    $('td').removeClass('selected');
    $('#sum').text(0);
    $('td').bind('mouseover',function(){
    //rest of the code

但可能在table上使用mousedown/up比使用document更好。

这是我的尝试，纯JS，它使用了一些ES5方法，因此可能无法在旧的浏览器上工作：

var box = {};
var area = document.getElementById('area');
var sum = document.getElementById('sum');
var vals = [].slice
    .call(document.querySelectorAll('.sequence_div'))
    .map(function(node){ return {
        val: parseInt(node.textContent,10),
        box: node.getBoundingClientRect()
    }});
window.addEventListener('mousedown', function(evt){
    box.x = evt.clientX;
    box.y = evt.clientY;
});
window.addEventListener('mousemove', function(evt){
    if(Object.keys(box).indexOf('x') !== -1){
        var rect = {
            t: Math.min(evt.clientY,box.y), 
            l: Math.min(evt.clientX,box.x),
            w: Math.abs(evt.clientX - box.x),
            h: Math.abs(evt.clientY - box.y)
        };
        area.setAttribute('style', 'display:block;' +
            'top:' + rect.t + 'px;left:'+ rect.l + 'px;' +
            'width:' + rect.w + 'px;height:' + rect.h + 'px;'              
        );
        sum.textContent = vals.filter(function(val){
            return val.box.top >= rect.t &&
               val.box.top + val.box.height <= rect.t + rect.h &&
               val.box.left >= rect.l &&
               val.box.left + val.box.width <= rect.l + rect.w;
        }).reduce(function(memo, val){
            return memo + val.val;
        },0);
    }
});
window.addEventListener('mouseup', function(evt){
    area.removeAttribute('style');
    sum.textContent = 0;
    box = {};
});

JSFiddle 上的工作演示

相关文章：