javascript - 如何在js中为网格中的特定行或列或对 Angular 线应用边框

Question

我有一个 5x5 的网格，它由表格 <tr> 组成和 <td>组合，

我突出显示了一个带有边框的随机单元格，当行或列或对 Angular 线匹配时

我应该能够为特定的行或列或对 Angular 线应用边框。

请查看示例图片:

我尝试了很多组合，但无法弄清楚。

抱歉，我无法显示我的代码!!!

Answer 1

下面应该让你开始，基本前提已经到位:

Demo Fiddle

HTML

<table>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
</table>

CSS

td{
    height:50px;
    width:50px;
    border:2px solid #000;
}
td:nth-child(2){
    width:40px;    
}
tr:nth-child(2) td{
    height:40px;    
}
tr:first-child td:first-child, 
tr:first-child td:last-child,
tr:last-child td:first-child,
tr:last-child td:last-child{
    border:2px solid #ff0000;
}


tr:first-child td:nth-child(2) {
    border-bottom:none;

}
tr:last-child td:nth-child(2) {
    border-top:none;
}
tr:nth-child(2) td:nth-child(2) {
    border:none;
}
tr:nth-child(2) td:first-child {
    border-right:none;
}
tr:nth-child(2) td:last-child {
    border-left:none;
}

如果您希望突出显示在悬停时是动态的，您可以使用 jQuery:

Demo Fiddle

HTML

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

CSS

table, td {
    background-color: white;
    border: 2px solid red;
}
td {
    width: 40px;
    height: 40px;
}
tr:hover td {
    border: 2px solid black;
}
.highlighted {
    border: 2px solid black;
}
.highlightedPrev {
    border-right: 2px solid black;
}
.highlightedPrevRow {
    border-bottom: 2px solid black;
}

jQuery

$('td').hover(function () {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');

    if (t > 1) {
        var t1 = t - 1;
        //alert("T:" + t + "<br/> T1:" + t1);
        $('td:nth-child(' + t1 + ')').addClass('highlightedPrev');
    }
},

function () {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted ');
    if (t > 1) {
        var t1 = t - 1;
        $('td:nth-child(' + t1 + ')').removeClass('highlightedPrev');
    }
});


$('tr').hover(function () {
    var r = parseInt($(this).index()) + 1;
    if (r > 1) {
        var r1 = r - 1;
        //alert("T:" + t + "<br/> T1:" + t1);
        $('tr:nth-child(' + r1 + ') td').addClass('highlightedPrevRow');
    }
},

function () {
    var r = parseInt($(this).index()) + 1;

    if (r > 1) {
        var r1 = r - 1;
        $('tr:nth-child(' + r1 + ') td').removeClass('highlightedPrevRow');
    }
});