Есть html-таблица, которую вернул нам сторонний веб-сервис. Или утилита. Поменять код не можем, а хотим, чтобы столбцы были в том порядке, который нужен. А еще лучше иметь возможность ими управлять. Сейчас расскажу о том, как на решение подобной задачи потратить не более получаса (5 минут оптимально).
Итак, есть у нас таблица игроков команды Боруссия Дортмунд. В таблице есть столбцы порядковый номер, имя, фамилия и дата рождения. (Рис. 1).
Код таблицы:
<table border=0 cellspacing=0 cellpadding=0 class="tbl"> <tr> <th>#</th> <th>Имя</th> <th>Фамилия</th> <th>Дата рождения</th> </tr> <tr> <td>1</td> <td>Roman </td> <td>Weidenfeller</td> <td>06/08/80</td> </tr> <tr> <td>2</td> <td>Neven</td> <td>Subotic</td> <td>10/12/88</td> </tr> <tr> <td>3</td> <td>Mats</td> <td>Hummels</td> <td>16/12/88</td> </tr> <tr> <td>4</td> <td></td> <td>Sokratis</td> <td>09/06/88</td> </tr> </table>
Эта таблица предоставляется сторонним сервисом и изменить данные самостоятельно нет возможности. А нужно вставить эту табличку, но так, чтоб колонка «Дата рождения» была сразу после порядкового номера.
Вижу 2 решения задачи. Первая – написать утилиту (на PHP или C#), которая будет парсить полученный код, обрабатывать и возвращать нужный мне. Но в таком случае я привязываюсь к сторонним утилитам, процесс работы которых надо контролировать, ее нужно где-то запускать. А это не всегда возможно.
Потому сразу перейду к второму способу – без обработки получаемых данных, но с использованием небольшого кода на JavaScript с использованием jQuery. В наши дни jQuery используется более чем на половине сайтов, и с каждым днем это число только растет.
Итак, нужно написать небольшую функцию, которая будет перемещать столбцы таблицы. Важно не забыть, что в таблице могут быть как тэги "td", так и "th".
<script type="text/javascript"> jQuery.moveColumn = function (table, from, to) { var rows = jQuery('tr', table); var cols; rows.each(function() { cols = jQuery(this).children('th, td'); cols.eq(from).detach().insertBefore(cols.eq(to)); }); } </script>
Вызов функции выглядит примерно так:
var tbl = jQuery('.tbl'); jQuery.moveColumn(tbl, 3, 1);
Для автоматической смены порядка столбцов таблицы можно использовать такой код:
<script type="text/javascript"> $(document).ready(function() { var tbl = jQuery('.tbl'); jQuery.moveColumn(tbl, 3, 1); }); </script>
Для смены порядка столбцов вручную (по нажатию кнопки) нужно добавить эту самую кнопку на страницу и немного добавить кода. Примерно так:
<script type="text/javascript"> $(document).ready(function() { $('#srt').click(function() { var tbl = jQuery('.tbl'); jQuery.moveColumn(tbl, 3, 1); }); }); </script> <input type="Button" id="srt" value="Сменить порядок" />