Question

我有两个表：表X和表Y.我有一个用于表X的mouseover和mouseout处理程序，它们突出显示了相关的单元格。

对于表Y，我如何突出显示colspan为2或更高的标题下方的单元格？

- If header highlighted - highlight cells underneath it
- If row highlighted - highlight cells within that row

小提琴：http://jsfiddle.net/RF7U3/10/

我的尝试是在上述小提琴的较低版本中（即：http://jsfiddle.net/RF7U3/5/）

HTML：

Table X
<table id="table-x">
    <tr>
        <td class="b">Col A</td>
        <td class="b">Col B</td>
        <td class="b">Col C</td>
    </tr>
    <tr class="a">
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
    <tr class="a">
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
</table>

Table Y
<table id="table-y">
    <tr>
        <td class="b">Col A</td>
        <td class="b">Col B</td>
        <td class="b">Col C</td>
    </tr>
    <tr class="a">
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
    <tr class="a">
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
</table>

CSS：

#table-x td {
    border:1px solid black;
}

JavaScript的：

function highlight(selector, color) {
    $(selector).css('border-color', color);   
}

$('#table-x td.b').mouseover(function() {
   var columnIndex = $(this).index() + 1;
   var columnCells = $('#table-x td:nth-child(' + columnIndex + ')');
   highlight(columnCells, 'red'); 
}).mouseout(function() {
   var columnIndex = $(this).index() + 1;
   var columnCells = $('#table-x td:nth-child(' + columnIndex + ')');
   highlight(columnCells, 'inherit');  
});

$('#table-x tr.a').mouseover(function() {
    highlight($(this).find('td'), 'red');
}).mouseout(function() {
    highlight($(this).find('td'), 'inherit');
});

Answer 1

我做了很多改动，以便事件和变化都与悬停在上面的细胞有关。我还提取了鼠标中的常用代码。因为那变得非常大：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/RF7U3/21/

function highlight(selector, color) {
    $(selector).css('border-color', color);
}

// Lightup the columns associated with this column
function lightup($th, color) {
    var $table = $th.closest('table');
    var columnIndex = $th.index();

    // Add up all the colspans from all columns to just before the one clicked (to find the correct start column below it)
    // Get the current colspan if any to determine the last column to include in the scan
    var colspan = ~~$th.attr('colspan') || 1;
    var $header = $table.find('tr:first').children().slice(0, columnIndex);
    var index = 0;
    $header.each(function (i) {
        index += ~~$(this).attr('colspan') || 1;
    });
    while (colspan > 0) {
        var columnCells = $table.find('tr').slice(1).find('td:nth-child(' + (index + colspan) + ')');
        highlight(columnCells, color);
        highlight($th, color);
        colspan--;
    }
}

$('table td.b').mouseover(function () {
    lightup($(this), 'red');
}).mouseout(function () {
    lightup($(this), 'inherit');
});

$('table tr.a').mouseover(function () {
    highlight($(this).find('td'), 'red');
}).mouseout(function () {
    highlight($(this).find('td'), 'inherit');
});

注意：

~~是将字符串值转换为整数的快捷方式。
|| 0将未定义的值转换为0。

突出显示跨越2个单元格的标题下方的单元格

1 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/RF7U3/21/