Показать сообщение отдельно
  #9 (permalink)  
Старый 09.07.2012, 15:50
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<style>
  table, td {border: solid 1px; cursor: pointer}
</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>

Последний раз редактировалось bes, 09.07.2012 в 16:13.
Ответить с цитированием