how to apply border for particular row or column or diagonal in grid in js

Question

I have a 5x5 grid which is made up of table <tr> and <td>combination,

I am highlighting a random cell with border and when row or column or diagonal match

I should be able to apply border for particular row or column or diagonal.

please look at the sample image :

I have tried many combination but unable to figure it out.

I cannot show my code sorry!!!.

Answer 1

The below should get you started, the basic premise is in place:

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

If you wish for the highlighting to be dynamic on hover, you can use 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');
    }
});