Рисунок 1. Таблица, в которой надо поменять столбцы местами

Есть html-таблица, которую вернул нам сторонний веб-сервис. Или утилита. Поменять код не можем, а хотим, чтобы столбцы были в том порядке, который нужен. А еще лучше иметь возможность ими управлять. Сейчас расскажу о том, как на решение подобной задачи потратить не более получаса (5 минут оптимально).

Итак, есть у нас таблица игроков команды Боруссия Дортмунд. В таблице есть столбцы порядковый номер, имя, фамилия и дата рождения. (Рис. 1).

Рисунок 1. Таблица, в которой надо поменять столбцы местами

Рисунок 1. Таблица, в которой надо поменять столбцы местами

 

Код таблицы:

 

Эта таблица предоставляется сторонним сервисом и изменить данные самостоятельно нет возможности. А нужно  вставить эту табличку, но  так, чтоб колонка «Дата рождения» была сразу после порядкового номера.

Рисунок 2. Нужный порядок столбцов таблицы

Рисунок 2. Нужный порядок столбцов таблицы

 

Вижу 2 решения задачи. Первая – написать утилиту (на PHP или C#), которая будет парсить полученный код, обрабатывать и возвращать нужный мне. Но в таком случае я привязываюсь к сторонним утилитам, процесс работы которых надо контролировать, ее нужно где-то запускать. А это не всегда возможно.

Потому сразу перейду к второму способу – без обработки получаемых данных, но с использованием небольшого кода на JavaScript с использованием jQuery. В наши дни jQuery используется более чем на половине сайтов, и с каждым днем это число только растет.

Итак, нужно написать небольшую функцию, которая будет перемещать столбцы таблицы. Важно не забыть, что в таблице могут быть как тэги "td", так и "th".

 

Вызов функции выглядит примерно так:

 

Для автоматической смены порядка столбцов таблицы можно использовать такой код:

 

Для смены порядка столбцов вручную (по нажатию кнопки) нужно добавить эту самую кнопку на страницу и немного добавить кода. Примерно так: