Selección de tamaño en tabla

by paska

HTML

<table cellpadding="1" cellspacing="0">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

td {
    width: 30px;
    height: 30px;
    border: 1px solid black;
     box-sizing: border-box;
}
td.selected {
    border: 2px solid red;
}
td.hover {
    border: 1px solid #ee0000;
}

JavaScript

var fixed = null;
$("table td").hover(function() {
    $("table td").removeClass("selected");
    var $this = $(this),
        tr = $this.closest("tr"),
        x = tr.find("td").index($this),
        y = tr.closest("table").find("tr").index(tr);
    tr.closest("table").find("tr:lt(" + (y + 1) + ")").each(function() {
       $(this).find("td:lt(" + (x + 1) + ")").addClass("hover"); 
    });
});
$("table td").click(function() {
    var $this = $(this),
        tr = $this.closest("tr"),
        x = tr.find("td").index($this),
        y = tr.closest("table").find("tr").index(tr);
    fixed = { x: x, y: y };
    tr.closest("table").find("td.hover").removeClass("hover").addClass("selected");
});
$("table").mouseout(function() {
    $(this).find("td").removeClass("hover");
    $(this).find("tr:lt(" + (fixed.y + 1) + ")").each(function() {
       $(this).find("td:lt(" + (fixed.x + 1) + ")").addClass("selected"); 
    });
});