Some table harlemshake

by Andrew Dunai

HTML

<table class="pole_table" id="pole_table" border="1px" cellpadding="1px" cellspacing="1px">
    <tbody>
        <tr>
            <td class="sota g" id="cell_1">1</td>
            <td class="sota g" id="cell_2">2</td>
            <td class="sota g" id="cell_3">3</td>
            <td class="sota g" id="cell_4">4</td>
            <td class="sota y" id="cell_5">5</td>
            <td class="sota y" id="cell_6">6</td>
            <td class="sota y" id="cell_7">7</td>
            <td class="sota y" id="cell_8">8</td>
            <td class="sota y" id="cell_9">9</td>
            <td class="sota y" id="cell_10">10</td>
        </tr>
        <tr>
            <td class="sota g" id="cell_11">11</td>
            <td class="sota g" id="cell_12">12</td>
            <td class="sota g" id="cell_13">13</td>
            <td class="sota g" id="cell_14">14</td>
            <td class="sota g" id="cell_15">15</td>
            <td class="sota g" id="cell_16">16</td>
            <td class="sota g" id="cell_17">17</td>
            <td class="sota g" id="cell_18">18</td>
            <td class="sota g" id="cell_19">19</td>
            <td class="sota g" id="cell_20">20</td>
        </tr>
        <tr>
            <td class="sota g" id="cell_31">31</td>
            <td class="sota g" id="cell_32">32</td>
            <td class="sota g" id="cell_33">33</td>
            <td class="sota g" id="cell_34">34</td>
            <td class="sota g" id="cell_35">35</td>
            <td class="sota g" id="cell_36">36</td>
            <td class="sota g" id="cell_37">37</td>
            <td class="sota g" id="cell_38">38</td>
            <td class="sota g" id="cell_39">39</td>
            <td class="sota g" id="cell_40">40</td>
        </tr>
        <tr>
            <td class="sota g" id="cell_41">41</td>
            <td class="sota g" id="cell_42">42</td>
            <td class="sota g" id="cell_43">43</td>
            <td class="sota g" id="cell_44">44</td>
            <td class="sota g"...

CSS

.rowcol {
    color: blue;
}
.selected {
    color: red;
}
.console-line {
    font-family: monospace;
    margin: 2px;
}
.over_vert {
    position: absolute;
    left: 0;
    top:0;
    z-index: 5000;
}
.over_horiz {
    position: absolute;
    left: 0;
    top:0;
    z-index: 5001;
}
.over_target {
    position: absolute;
    left: 0;
    top:0;
    z-index: 5002;
}

.col-line, .row-line {
    transition: all 0.1s linear;
    background: rgba(0, 128, 255, 0.3);
    pointer-events: none;
    position: absolute;
    z-index: 10000;
}

JavaScript

/* var allCells = $("#pole_table td");

var consoleLine = '<p class="console-line"></p>';

console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};

function log(s) {
    console.log(s);
}


//creating cross overlay over cell #55
var cell = $("#pole_table #cell_55");
var cellheight = cell.height();
var cellwidth = cell.width();
log("cell text: " + cell.text());
log("cell height: " + cellheight);
log("cell width: " + cellwidth);

var cellpos = cell.index();
log("cell pos: " + cellpos);
var cellrow = cell.parent().find("td");
log("cellrow: " + cellrow.length);

var cellcol = $("#pole_table td").filter(":nth-child(" + (cellpos + 1) + ")");
log("cellcol: " + cellcol.length);

//horizontal div overlay
var over_h = $("body").append('<div id="over_h" class="over_horiz"></div>');
log("over_h: " + over_h);

//vertical divoverlay
var over_v = $("body").append('<div id="over_v" class="over_vert"></div>');
log("over_v: " + over_v);


//target cell(cell which is currently mouse=overed, e.g. cell 55)
var over_t = $("body").append('<div id="over_t" class="over_target"></div>');
log("over_t: " + over_t);

var rowwidth = 0; //total width of the cell row
var colheight = 0; //total height of the cell column
cellrow.each(function (index) {
    rowwidth += parseInt($(this).width(), 10);
});

cellcol.each(function (index) {
    colheight += parseInt($(this).height(), 10);
});


log("cell row width: " + rowwidth);
log("cell column width: " + colheight);

//locate row div to row
over_h.css({
    'left': $(cellrow[0]).offset().left+'px',
    'top': $(cellrow[1]).offset().top+'px',
    'width': rowwidth+'px',
    'height': cellheight+'px',
    'border': '1px solid blue'
});





//custom code
allCells.on("mouseover", function () {
    var el = $(this),
        pos = el.index();
    el.parent().find("th, td").addClass("rowcol"); //horizontal row
    var d = allCells.filter(":nth-child(" + (pos + 1) + ")");
    d.addClass("rowcol");...