MC-XOBAHCK,
макет, обьединение ячеек(mergeTd) расчитано на первый клик!!!(требует доработки).
выделить ячейки и нажать кнопку
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table{
height: 250px;
width: 250px;
border-collapse: separate;
}
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(event) {
var tds = document.querySelectorAll("td.sel"),
len = tds.length,
colspan = 1,
parent;
if (len) {
[].forEach.call(tds, function(el, i) {
if (i) {
var elParent = el.parentNode;
parent == elParent && colspan++;
elParent.removeChild(el)
} else parent = el.parentNode
});
tds[0].colSpan = colspan;
tds[0].rowSpan = len / colspan
}
}
document.querySelector(".merge").addEventListener("mousedown", mergeTd)
});
</script>
</head>
<body>
<table>
<tbody>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
<input name="" type="button" value="go" class="merge">
</body>
</html>