Slyweb
На разработку сайта! Скидки 50%!

Вопрос по each() и перебору строк таблицы

Вы можете задавать любые вопросы по jQuery.

Вопрос по each() и перебору строк таблицы

Сообщение battrack » 08 фев 2012, 12:06

В данный момент занимаюсь изучением jQuery сразу по двум книгам и информации из инета. В одной книге застрял на одном примере.
Вопрос чисто по синтаксису (по крайней мере я так думаю).
Рассматривается пример сортировки таблицы при клике на заголовок столбца.
Есть таблица <table class="sortable">
в которой строками являются книги (столбцы: заголовок, автор, издание, цена).таблица разделена на <thead> и <tbody>
Клик по ячейке <th class="sort-alpha">title</th> вызывает функцию сортировки строк данной таблицы по названию.
Ниже привожу код.

Код: Выделить всё

   $('table.sortable').each(function() {
      var $table = $(this);
      $('th', $table).each(function(column) {
      
         var $header = $(this);
         
         if ($header.is('.sort-alpha')) {
            $header.addClass('clickable').hover(function() {
               $header.addClass('hover');
            }, function() {
               $header.removeClass('hover');
            }).click(function() {
               var rows = $table.find('tbody > tr').get();
               rows.sort(function(a, b) {
               
               var keyA = $(a).children('td').eq(column).text()
               .toUpperCase();
               var keyB = $(b).children('td').eq(column).text()
               .toUpperCase();
               console.log(keyA,keyB);
               if (keyA < keyB) return -1;
               if (keyA > keyB) return 1;
               
               return 0;
            });
            
            $.each(rows, function(index, row) {
               $table.children('tbody').append(row);
            });
            });
         }
      });
   });
   

   
});




Вопрос по конкретной части кода (весь код чтобы мне понять - до этого еще далеко). Пока вопрос лишь по 4-ой строке:

$('th', $table).each(function(column) { - что это за синтаксис такой?
$('th', $table) - ???? если мы хотим перебрать все колонки почему не записываем таким образом: $($table th) ??

Также не понятно применение each к таблице в целом (2-я строка кода). Что мы этим each-ем перебираем? Таблица то одна.

(на всякий случай поясню что алгоритм сортировки не идеальный. просто в книге он рассматривается как первый шаг, который в дальнейшем улучшается в следующих примерах)
Последний раз редактировалось battrack 08 фев 2012, 14:52, всего редактировалось 1 раз.
battrack
 
Сообщения: 8
Зарегистрирован: 08 фев 2012, 12:03

Re: Вопрос по each() и перебору строк таблицы

Сообщение admin » 08 фев 2012, 13:34

Это значит все таблицы будут проходить через цикл
Код: Выделить всё
$('table.sortable').each(function() {

в котором у каждой таблицы
Код: Выделить всё
var $table = $(this);

каждый столбец - заголовок
Код: Выделить всё
$('th' $table).each(function(column) {
var $header = $(this);

будет проверятся на наличие класса sort-alpha
Код: Выделить всё
if ($header.is('.sort-alpha')) {

и если этот класс указан то будет добавлен эффект
Код: Выделить всё
$header.addClass('clickable').hover(function() {
               $header.addClass('hover');
            }, function() {
               $header.removeClass('hover');

после чего этот столбце будет добавлен обработчик события ckick
Код: Выделить всё
}).click(function() {


.... остальной код сортирует столбцы
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02

Re: Вопрос по each() и перебору строк таблицы

Сообщение battrack » 08 фев 2012, 14:55

Так в том-то и проблема, что даже ВЫ написали так:
$($table 'th')

а в примере то написано по-другому:
$('th', $table)

Я думал, что выборка элементов осуществляется так: $(#test p) - например выбрать все абзацы из контейнера с id=test
Почему же там такая запись, что сначала идет переменная которая хранит выборку таблицы и через запятую элемент th да еще в аппострофах???
battrack
 
Сообщения: 8
Зарегистрирован: 08 фев 2012, 12:03

Re: Вопрос по each() и перебору строк таблицы

Сообщение admin » 08 фев 2012, 15:19

Всё правильно, таков синтаксис jQuery, для обычного поиска по селектору пишется так же как в css, для поиска в объекте нужно сперва указать селектор в кавычках(элемент DOM), затем объект в нашем случае $table. Я исправил код на правильный - $('th', $table), чтоб другие пользовались без ошибок!

Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="ru-ru" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />

<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />

<title></title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('table.sortable').each(function() {
      var $table = $(this);
      $('th', $table).each(function(column) {
      
         var $header = $(this);
         
         if ($header.is('.sort-alpha')) {
            $header.addClass('clickable').hover(function() {
               $header.addClass('hover');
            }, function() {
               $header.removeClass('hover');
            }).click(function() {
               var rows = $table.find('tbody > tr').get();
               rows.sort(function(a, b) {
               
               var keyA = $(a).children('td').eq(column).text()
               .toUpperCase();
               var keyB = $(b).children('td').eq(column).text()
               .toUpperCase();
               console.log(keyA,keyB);
               if (keyA < keyB) return -1;
               if (keyA > keyB) return 1;
               
               return 0;
            });
            
            $.each(rows, function(index, row) {
               $table.children('tbody').append(row);
            });
            });
         }
      });
   });
   

   
});
</script>
<table class="sortable">

  <thead>

    <tr>

      <th></th>

      <th class="sort-alpha">Title</th>

      <th>Author(s)</th>

      <th>Publish&nbsp;Date</th>

      <th>Price</th>

    </tr>

  </thead>

  <tbody>
    <tr>

      <td>

        <img src="../covers/small/1847192386.png" width="49"

             height="61" alt="Building Websites with

                                                Joomla! 1.5 Beta 1" />

      </td>

      <td>Библия</td>

      <td>Hagen Graf</td>

      <td>Feb 2007</td>

      <td>$40.49</td>

    </tr>
   
    <tr>

      <td>

        <img src="../covers/small/1847192386.png" width="49"

             height="61" alt="Building Websites with

                                                Joomla! 1.5 Beta 1" />

      </td>

      <td>Апокалипсис</td>

      <td>Hagen Graf</td>

      <td>Feb 2007</td>

      <td>$40.49</td>

    </tr>
   
       <tr>

      <td><img src="../covers/small/1904811620.png" width="49"

               height="61" alt="Learning Mambo: A Step-by-Step

               Tutorial to Building Your Website" /></td>

      <td>Вольтер</td>

      <td>Douglas Paterson</td>

      <td>Dec 2006</td>

      <td>$40.49</td>

    </tr>
    <tr>
   
    <tr>

      <td><img src="../covers/small/1904811620.png" width="49"

               height="61" alt="Learning Mambo: A Step-by-Step

               Tutorial to Building Your Website" /></td>

      <td>Герцен</td>

      <td>Douglas Paterson</td>

      <td>Dec 2006</td>

      <td>$40.49</td>

    </tr>
    <tr>

      <td><img src="../covers/small/1904811620.png" width="49"

               height="61" alt="Learning Mambo: A Step-by-Step

               Tutorial to Building Your Website" /></td>

      <td>Достоевский</td>

      <td>Douglas Paterson</td>

      <td>Dec 2006</td>

      <td>$40.49</td>

    </tr>

 

  </tbody>

</table>

 </body>
</html>
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02

Re: Вопрос по each() и перебору строк таблицы

Сообщение battrack » 08 фев 2012, 16:26

Вот теперь понял! Большое спасибо!
Странно что автор книги не разъяснил этот пример, при том что там довольно подробно все разжевывается и объясняется.
battrack
 
Сообщения: 8
Зарегистрирован: 08 фев 2012, 12:03


Вернуться в Вопросы по jQuery

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron