Сообщение от bes
|
Можно продемонстрировать на данном примере
|
Самое простое:
<style>
table, td {border: solid 1px; cursor: pointer}
*!* table{border-spacing:6px}*/!*
</style>
<table id="table">
<tr>
<td rowspan="3">0</td>
<td>1</td>
<td rowspan="3">2</td>
<td colspan="2">3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td rowspan="2">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td id="td">9</td>
<td>10</td>
<td>11</td>
</tr>
</table>
<script>
window.onload = function () {//onload begin
var table = document.getElementById('table');
var coord, left, top, right, previous, next;
var d = 5;//здесь можно уточнить
var p, n;
table.onclick = function(e) {//onclick begin
e = e || event;
var target = e.target || e.srcElement;
if (target.parentNode.tagName == 'TR') {//if begin
coord = target.getBoundingClientRect();
left = coord.left + 1;
top = coord.top + 1;
right = coord.right;
previous = document.elementFromPoint(left - d, top);
next = document.elementFromPoint(right + d, top);
if (previous.parentNode.tagName == 'TR') {
p = previous.innerHTML;
} else {
p = 'нет';
}
if (next.parentNode.tagName == 'TR') {
n = next.innerHTML;
} else {
n = 'нет';
}
alert('предыдущий: ' + p + '\nследующий: ' + n)
}//if end
}//onclick end
}//onload end
</script>