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

Question

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

我突出显示带边框的随机单元格以及行或列或对角线匹配

我应该可以为特定的行或列或对角线应用边框。

请查看示例图片：

我尝试了很多组合，但无法弄明白。

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

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');
    }
});