[MC-XOBAHCK]

Доработал расчёт размеров объединённой ячейки:

<style>table{min-height: 250px;border-collapse: separate}th, td{min-width:50px;min-height:15px}td{border: 1px #0000CD solid;background-color: #800080} td.sel{opacity:.6} #line{position:absolute;width:0px;height:0px;background:rgba(0,90,255,0.25);border:1px solid rgba(0,114,255,0.5);box-sizing:border-box}</style>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var target = document.createElement("div"),
        x, y;
    target.id = "line";
    document.addEventListener("mousedown", function(e) {
        if (e.which > 1) return;
        x = e.pageX;
        y = e.pageY;
        document.body.appendChild(target);
        selectBlock();
        document.addEventListener("mousemove", move, false);
        return false
    }, false);

    function move(e) {
        e.preventDefault();
        target.style.width = Math.abs(e.pageX - x) + "px";
        target.style.height = Math.abs(e.pageY - y) + "px";
        target.style.left = (e.pageX < x ? e.pageX : x) + "px";
        target.style.top =
            (e.pageY < y ? e.pageY : y) + "px";
        selectBlock(true)
    }
    document.addEventListener("mouseup", function() {
        target.style.width = "0px";
        target.style.height = "0px";
        document.removeEventListener("mousemove", move);
        target.parentNode && document.body.removeChild(target)
    });

    function collisionDetection(x1, y1, w1, h1, x2, y2, w2, h2) {
        return x1 < x2 + w2 && y1 < y2 + h2 && x1 + w1 > x2 && y1 + h1 > y2
    }

    function coordinate(el) {
        var pos = el.getBoundingClientRect(),
            top = pos.top,
            left = pos.left,
            right = pos.right,
            bottom = pos.bottom,
            height = bottom - top,
            width = right - left;
        return [left, top, width, height]
    }

    function selectBlock(add) {
        [].forEach.call(document.querySelectorAll("td"), function(el) {
            var data = coordinate(el).concat(coordinate(target)),
                modify = add && collisionDetection.apply(null, data) ? "add" : "remove";
            el.classList[modify]("sel")
        })
    }

    function mergeTd() {
        var tds = document.querySelectorAll('td.sel'),
            len = tds.length,
            parent;

        let col = [[]];
        let row = 0;
        let startArr = 0;

        if (len) {
            [].forEach.call(tds, function (el, i) {
                var elParent = el.parentNode;

                if (i == 0) {
                    parent = el.parentNode;
                    el.hasAttribute('rowspan') ? row = row + +el.getAttribute('rowspan') : row++;
                }
                else if (parent == elParent) {
                    
                }
                else {
                    parent = el.parentNode;
                    startArr++;
                    col[startArr] = [];
                    el.hasAttribute('rowspan') ? row = row + +el.getAttribute('rowspan') : row++;
                }
                
                el.hasAttribute('colspan') ? col[startArr].push(+el.getAttribute('colspan')) : col[startArr].push(1);
            });

            // console.log(col);    // массив размеров colspan


            let col1 = (function() {
                let n = [];
                for (let i = 0; i < col.length; i++) {
                    n[i] = col[i].reduce((a, b) => a + b);
                }
                return Math.max.apply(null, n);
            })();

            
            for (let i = 0; i < tds.length; i++) {
                if (i == 0) {
                    col1 > 1 ? tds[i].setAttribute('colspan', col1, 0) : 0;
                    row > 1 ? tds[i].setAttribute('rowspan', row, 0) : 0;
                }
                else tds[i].remove();
            }
        }
    };
    document.querySelector(".merge").addEventListener("mousedown", mergeTd)
});
</script>


<table>
    <tbody>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
</table>
<input type="button" value="go" class="merge">

Расчёт colspan можно делать гораздо проще и короче. Знаю как, но пока оставил так чтобы можно было вывести в консоль и посмотреть размеры colspan выделенных ячеек в виде многомерного массива.

Есть баг при выделении ячеек "лесенкой". Как доработать этот момент, пока не знаю.
Есть мысля увеличивать размер создаваемого прямоугольника выделения, до крайних координат уже выделенных ячеек min top, min left, max reigth, max bottom.
При этом нужно и про уменьшение области выделения не забывать.

Какая то длинная портянка в условии нарисовуется... осталось "вырисовать" куда и о чём написать это условие : )


Если можно - ВОПРОС по таблице
У меня у таблицы стоит атрибут contenteditable="true", то есть можно ячейки редактировать.
Можно ли как то определить в какой ячейке установлен курсор? Может добавляется к ячейке фокус или ещё что?