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

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

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

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

请看示例图片：

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

我无法显示我的代码对不起！

最佳答案

下面应该让您入门，基本前提是到位：

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

关于javascript - 如何在js中的网格中为特定的行或列或对 Angular 线应用边框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22349269/