Показать сообщение отдельно
  #14 (permalink)  
Старый 09.07.2012, 16:53
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,586

Сообщение от 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>
__________________
29375, 35
Ответить с цитированием