Обход таблицы по вертикали

248

27 июня 2017, 21:37

Всем привет. Подскажите пожалуйста, есть ли какой-то простой способ обойти таблицу по вертикали, сейчас я знаю только такой способ, чтобы пройтись по всем ячейкам:

$('td').each(function(i){ 
  console.log(this); 
});

но он ходит по горизонтали. Нужен метод, который ходил бы по вертикали:

Заранее благодарен за любую помощь, литература или любой другой ресурс.

Answer 1

Для того, чтобы найти ответ на этот вопрос, сначала нужно верно задать вопрос. Давайте посмотрим на структуру таблицы в html-коде:

<table>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  ...
</table>

Сразу становится ясно, почему по умолчанию JQuery реализует именно обход по горизонтали - банально потому, что таблица строится из строк (<tr>), которые содержат в себе то или иное количество ячеек. Естественно, что если вы начнете перебирать эти ячейки (<td>), то ваш перебор пойдет по горизонтали, строка за строкой.

Соответственно, чтобы решить вашу задачу, вам нужно придумать, как преобразовать структуру ваших данных (по сути - таблицу, а если еще конкретнее - DOM-дерево селектора table), таким образом, чтобы элементы строились вертикально.

Я бы наметил тут три пути:

Найти нужный функционал в JS/JQuery.
Перестроить таблицу средствами html, если таковое возможно.
Сначала выгрузить все данные в некую матрицу, которую потом крутить как угодно.

Можете посмотреть ответы на эти вопросы (или попытки ответов) тут или тут.

Но на самом деле, самым простым вариантом было бы изменить саму структуру данных в вашей таблице, изменив ее таким образом, чтобы вашему коду было бы необходимо обходить ее именно что горизонтально.