<!doctype html>
<style>
table, td {border: solid 1px; cursor: pointer}
</style>
<table id="table">
<tr>
<td rowspan="3">0</td>
<td>1</td>
<td>16</td>
<td rowspan="2" colspan="2">2</td>
<td colspan="3">3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">5</td>
<td rowspan="2">6</td>
<td colspan="2">7</td>
<td>17</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>14</td>
<td>15</td>
<td>18</td>
</tr>
</table>
<script>
window.onload = function () {//onload begin
var table = document.getElementById('table');
var len = table.rows.length;
var row, cell, td, colspan, rowspan, m;
for (var i = 0; i < len; i++) {
row = table.rows[i];
for (var j = 0; j < row.children.length; j++) {
cell = row.children[j];
colspan = cell.getAttribute('colspan');
if (colspan) {
for (var k = 1; k < colspan; k++) {
td = row.insertCell(j + k);
td.innerHTML = cell.innerHTML;
td.style.display = 'none';
}
j += colspan - 1;
}
}
}
for (var i = 0; i < len; i++) {
row = table.rows[i];
for (var j = 0; j < row.children.length; j++) {
cell = row.children[j];
rowspan = cell.getAttribute('rowspan');
if (rowspan) {
colspan = cell.getAttribute('colspan');
if (!colspan) {
colspan = 1;
}
for (var m = 1; m < rowspan; m++) {
for (var k = 0; k < colspan; k++) {
td = table.rows[i+m].insertCell(j + k);
td.innerHTML = cell.innerHTML;
td.style.display = 'none';
}
j += colspan - 1;
}
}
}
}
table.onclick = function(e) {//onclick begin
e = e || event;
var target = e.target || e.srcElement;
var previous, colspan, index, next, p, n;
if (target.parentNode.tagName == 'TR') {//if begin
previous = target.previousElementSibling;
if (previous) {
p = previous.innerHTML;
} else {
p = 'нет';
}
colspan = target.getAttribute('colspan');
if (!colspan) {
colspan = 1;
}
index = target.cellIndex + parseInt(colspan);
next = target.parentNode.children[index];
if (next) {
n = next.innerHTML;
} else {
n = 'нет';
}
alert('предыдущий: ' + p + '\nследующий: ' + n);
}//if end
}//onclick end
}//onload end
</script>