Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.07.2012, 09:14
Интересующийся
Отправить личное сообщение для Cepin Посмотреть профиль Найти все сообщения от Cepin
 
Регистрация: 07.03.2009
Сообщений: 21

Как получить предыдущую ячейку при rowspan?
Есть огромная таблица с данными, в которой частенько встречаются ячейки со атрибутами rowspan и colspan.
Дана определенная ячейка из таблицы и нужно найти содержимое ее соседей (слева и справа).


Вот набросал мини-пример:
http://jsfiddle.net/zj7RU/

Вот таблица. Задача получить содержимое соседа слева(ячейка с номером 0) от ячейки с номером 5.


Как костыльный вариант использую следующую схему:
1) Создаю копию таблицы, где разворачиваю все colspan и rowspan (бью на ячейки с копированием содержимым)
2) Осуществляю переходы используя rowIndex и cellIndex

Вариант рабочий, но жутко тормозит на больших таблицах. Хотелось бы без глобального перебора.
Ответить с цитированием
  #2 (permalink)  
Старый 08.07.2012, 09:46
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,250

Хитро.
Пока на ум приходит только построение виртуальной модели таблицы при загрузке и навигация уже по оной.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2012, 10:00
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

а если nextSibling и previousSibling заюзать если известна требуемая (а она известна?)
Ответить с цитированием
  #4 (permalink)  
Старый 08.07.2012, 11:44
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Cepin,
1.Проставить в каждой ячейке свой индивидуальный класс
2. сделать первичный обход таблицы по строкам - добавить класс предыдущей ячейки к следущей(для добавления фиксируем ток первый класс в списке
3. Аналогичный обход сделать по столбцам и тоже добавлять только первый текущий класс в списке к последующей ячейке

4. При выборе данной ячейки -ищем все ячейки с классами прописанными в ней
Ответить с цитированием
  #5 (permalink)  
Старый 08.07.2012, 14:00
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,745

Как насчёт того, чтобы сохранять общее количество ячеек в строках, а неиспользуемым ячейкам ставить display: none

<table border=1 id="table" style="cursor: pointer;">
    <tr>
        <td rowspan="3">0</td>
        <td>1</td>
        <td rowspan="3">2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td style="display: none"></td>
        <td id="td">5</td>
        <td style="display: none"></td>
        <td>6</td> 
        <td>7</td>
    </tr>
    <tr>
        <td style="display: none"></td>
        <td id="td">8</td>
        <td style="display: none"></td>
        <td>9</td> 
        <td>0</td>
    </tr>
</table>​
<script>
window.onload = function (e) {
  var table = document.getElementById('table');
  var len;
  var index;

  table.onclick = function(e) {
    e = e || event;
    var target = e.target || e.srcElement; 
    if (target.parentNode.tagName == 'TR') {
      if (target.previousElementSibling == null) {
        alert('нет предыдущей ячейки')
      } else {
         index = target.parentNode.rowIndex; 
        for (var i = index; i >= 0; i--) {
          if (target.previousElementSibling.style.display != 'none') {
            alert(target.previousElementSibling.innerHTML);
            break;
          } else {
            index--;
            target = table.rows[index].cells[target.cellIndex];
          }
        }
      }
    }
  }

}
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 08.07.2012, 14:55
Интересующийся
Отправить личное сообщение для Cepin Посмотреть профиль Найти все сообщения от Cepin
 
Регистрация: 07.03.2009
Сообщений: 21

К сожалению, но нет возможности как-то повлиять на вывод этой таблицы.
Вообщем, по совету Aetae решил делать не копию таблицу, а модель (в каждой ячейке хранит лишь запись о соотвествующих координатах первой таблицы)

Что сделано для оптимизации:
1) Заранее определен максимальный rowspan (в моем случае это 3)
2) Сканировать теперь всю таблицу не обязательно.

Стартовую строку для обработки можно начинать не с 0, а строка заданной ячейки - 5 (из-за максимального rowspan для избежания глюков).
Правую и нижнюю сторону ограничиваем координатами известной ячейки + 1

Все это делает довольно сильно сокращает объем таблицы и дает высокую скорость обработки.

Вроде даже работает, но чувствую, что могут быть камни в таком подходе.
Ответить с цитированием
  #7 (permalink)  
Старый 08.07.2012, 15:49
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,745

Сообщение от Cepin
К сожалению, но нет возможности как-то повлиять на вывод этой таблицы.
Тогда проверять входит ли ячейка в строку, на которую распространён rowspan: последовательно проверяется есть ли в строках выше (до первой найденной) предыдущая по номеру ячейка с rowspan (getAttribute('rowspan')), значение которой распространяется до строки данной ячейки, если есть, значит предыдущее значение - это значение именно этой ячейки с rowspan.
Ответить с цитированием
  #8 (permalink)  
Старый 08.07.2012, 18:25
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

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

<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 в 15:13.
Ответить с цитированием
  #10 (permalink)  
Старый 09.07.2012, 15:14
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

bes,
Плюс! - ток в универсальном варианте нун искать все элементы по каждой из 4-x сторон: в порядке(обхода) прилегания и Учитываешь ли - что эл-т может быть одновременно и rowspan и colspan ?
(*Ксать скрипт весьма востребованный в бугалтерских расчетах - если exel таблы переносят в брауз,
Его бы добить и вылизать
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить значение переменной из callback функции? Хиросим AJAX и COMET 5 24.04.2012 08:32
Как в ВKонтакте сделано проигрывание при серфинге? iMichaeli7 Элементы интерфейса 9 18.05.2011 16:47
Как получить raw data с image? lyapharov Общие вопросы Javascript 2 06.04.2011 23:20
Как получить название композиции из Windows Mepia Plyaer alx99 Javascript под браузер 1 18.02.2011 15:21
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 11:19