Question

我正在构建一个关于Google Drive如何将表格插入文档的克隆。基本上，有一个正方形网格，允许您选择所需的行数和列数。通过悬停，您可以从左上角开始选择一组行/列，直到指针。由于需要疯狂的选择器，我似乎无法使突出显示正常工作。

这就是我现在所拥有的：

$('.row-add:lt(' + hoveredRows + ') .cell-add:lt(' + hoveredCols + ')').addClass('cell-highlight');

哪些状态＆＃34;找到的行少于用户选择的行数，然后在其中选择小于用户所选列数的列＃34;。

问题在于它只在第一行内工作，我认为是因为每个单元格的索引不会因为它在新行中而重置。

示例：http://jsfiddle.net/kthornbloom/jLrna0fz/1/

相关代码：

＆＃13;

$('.cell-add').hover(
    function () {
        
        // How many rows/cols have you selected?
        var hoveredCols = $(this).index() + 1,
            hoveredRows = $(this).parent().index() + 1;
        
        // Remove old highlighting
        $('.cell-highlight').removeClass('cell-highlight');
        
        // Update the text hint
        $('.table-dimension-result').html(hoveredRows + ' x ' + hoveredCols);
        
        // Add Highlighting to selected squares from top left to cursor
        $('.row-add:lt(' + hoveredRows + ') .cell-add:lt(' + hoveredCols + ')').addClass('cell-highlight');
        
}, function () {
    // Remove old highlighting
    $('.cell-highlight').removeClass('cell-highlight');
});

＆＃13;

.table-dimension {
    padding:10px;
    font-size:0;
    line-height:0;
}
.table-dimension-result {
    margin-top:10px;
    font-size:14px;
    text-align:center;
    border:1px solid #ccc;
    line-height:1.4em;
}
.row-add {
    white-space:nowrap;
}
.cell-add {
    display:inline-block;
    width:10px;
    height:10px;
    border:5px solid #fff;
    background:#ccc
}
.cell-highlight {
    border:5px solid #fff;
    background:#ec4b22;
    cursor:pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="table-dimension">
    <div class="row-add">
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
    </div>
    <div class="row-add">
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
    </div>
    <div class="row-add">
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
    </div>
    <div class="row-add">
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
    </div>
    <div class="table-dimension-result">0x0</div>
</div>

Column highlighting works,<br> row highlighting does not.

＆＃13;

如何修改选择器以使用行？我已经尝试了上面的代码，并使用了似乎也没有用的每个语句。

Answer 1

问题是lt不是基于子位置，而是基于它返回的元素数。你真的需要使用一个基于孩子位置的选择器。您可以通过混合使用':not'和':nth-child(1n+' + (hoveredCols+1) + ')'来实现这一目标。就像那样：

$('.row-add:lt(' + hoveredRows + ') .cell-add:not(:nth-child(1n+' + (hoveredCols+1) + '))').addClass('cell-highlight');

Fiddle

如何通过jQuery选择表中的某些单元格

1 个答案: