Работа с таблицами в mootools 1.11 (joomla 1.0.x)

Тема в разделе "Актуально, только не в тему", создана пользователем Jkr, 17.02.2011.

  1. Jkr
    Offline

    Jkr Russian Joomla! Team

    Регистрация:
    04.08.2006
    Сообщения:
    465
    Симпатии:
    27
    Пол:
    Мужской
    Доброго времени суток!

    Ситуация обстоит следующим образом: на странице есть несколько таблиц с классом ".content_menu". Примерно следующего вида:
    Код (html):
    1. <table class="content_menu">
    2.   <tr>
    3.     <th>Наименование</th>
    4.     <th>Фото</th>
    5.     <th>Кол-во, гр.</th>
    6.     <th>Цена, р.</th>
    7.   </tr>
    8.   <tr>
    9.     <td>---</td>
    10.     <td>---</td>
    11.     <td>---</td>
    12.     <td>---</td>
    13.   </tr>
    14.  <tr>
    15.     <td>---</td>
    16.     <td>---</td>
    17.     <td>---</td>
    18.     <td>---</td>
    19.   </tr>
    20. <tr>
    21.     <td>---</td>
    22.     <td>---</td>
    23.     <td>---</td>
    24.     <td>---</td>
    25. </tr>
    26. </table>
    Задача: всем первым ячейкам в каждой строке присвоить класс n1, вторым - n2, третьим - n3 , четвертым - n4. Чтобы получилось:
    Код (html):
    1. <table class="content_menu">
    2.   <tr>
    3.     <th>Наименование</th>
    4.     <th>Фото</th>
    5.     <th>Кол-во, гр.</th>
    6.     <th>Цена, р.</th>
    7.   </tr>
    8.   <tr>
    9.     <td class="n1">---</td>
    10.     <td class="n2">---</td>
    11.     <td class="n3">---</td>
    12.     <td class="n4">---</td>
    13.   </tr>
    14.   <tr>
    15.      <td class="n1">---</td>
    16.      <td class="n2">---</td>
    17.      <td class="n3">---</td>
    18.      <td class="n4">---</td>
    19.    </tr><tr>
    20.      <td class="n1">---</td>
    21.      <td class="n2">---</td>
    22.      <td class="n3">---</td>
    23.      <td class="n4">---</td>
    24.    </tr>
    25. </table>
    В самом начале пробовал использовать код вида:
    Код (CODE):
    1. window.addEvent('domready', function() {
    2.         $$('.content_menu tr td:nth-child(1)').each(function(it){it.addClass('n1')});
    3. });
    или
    Код (CODE):
    1. window.addEvent('domready', function() {
    2.         $$('.content_menu tr ').getElements('td:nth-child(1)').each(function(it){it.addClass('n1')});
    3. });
    Однако использование псевдо-селекторов всегда вызывало ошибку:
    После этого решил попробовать следующий способ (и разные его вариации):
    Код (CODE):
    1. window.addEvent('domready', function() {
    2.         $$('.content_menu').getElements('tr').each(function(trs, k){
    3.             trs.getElements('td').each(function(tds, p){
    4.                 tds.addClass('n'+p);
    5.             });
    6.         });
    7.     });
    Однако результат всегда следующий:
    Код (html):
    1. <table class="content_menu">
    2.    <tr>
    3.      <th>Наименование</th>
    4.      <th>Фото</th>
    5.      <th>Кол-во, гр.</th>
    6.      <th>Цена, р.</th>
    7.    </tr>
    8.    <tr>
    9.      <td class="n1">---</td>
    10.      <td class="n1">---</td>
    11.      <td class="n1">---</td>
    12.      <td class="n1">---</td>
    13.    </tr>
    14.   <tr>
    15.       <td class="n2">---</td>
    16.       <td class="n2">---</td>
    17.       <td class="n2">---</td>
    18.       <td class="n2">---</td>
    19.     </tr><tr>
    20.       <td class="n3">---</td>
    21.       <td class="n3">---</td>
    22.       <td class="n3">---</td>
    23.       <td class="n3">---</td>
    24.     </tr>
    25.  </table>
    26. <table class="content_menu">
    27.     <tr>
    28.       <th>Наименование</th>
    29.       <th>Фото</th>
    30.       <th>Кол-во, гр.</th>
    31.       <th>Цена, р.</th>
    32.     </tr>
    33.     <tr>
    34.       <td class="n1">---</td>
    35.       <td class="n1">---</td>
    36.       <td class="n1">---</td>
    37.       <td class="n1">---</td>
    38.     </tr>
    39.    <tr>
    40.        <td class="n2">---</td>
    41.        <td class="n2">---</td>
    42.        <td class="n2">---</td>
    43.        <td class="n2">---</td>
    44.      </tr><tr>
    45.        <td class="n3">---</td>
    46.        <td class="n3">---</td>
    47.        <td class="n3">---</td>
    48.        <td class="n3">---</td>
    49.      </tr>
    50.   </table>
    Т.е. для каждой таблицы он начинает отсчет "p" с 0, и прибавляет единицу для каждой строки, вместо того, чтобы делать это с переменной "k", а для "p" добавлять 1 для каждой ячейки в строке.

    В итоге рабочий вариант получился совсем уж грубый:
    Код (CODE):
    1. window.addEvent('domready', function() {
    2.  
    3.         $$('.content_menu').each(function(tbl, a){
    4.             tbl.setProperty('id','content_menu_'+a);
    5.         });
    6.        
    7.         var menus_count = $$('.content_menu').length;
    8.        
    9.         for(i=0; i < menus_count; i++) {
    10.            
    11.             $('content_menu_'+i).getElements('tr').each(function(trs, j){
    12.                 trs.setProperty('id','tr_'+i+'_'+j);
    13.             });
    14.            
    15.             var trs_count = $('content_menu_'+i).getElements('tr').length;
    16.  
    17.             for(k=0; k < trs_count; k++) {
    18.                 $('tr_'+i+'_'+k).getElements('td').each(function(tds, z){z++;tds.addClass('n'+z);});
    19.             }
    20.            
    21.             $('content_menu_'+i).getElements('tr').each(function(trs, j){
    22.                 trs.removeProperty('id');
    23.             });
    24.            
    25.         }
    26.        
    27.         $$('.content_menu').each(function(tbl, a){
    28.             tbl.removeProperty('id');
    29.         });
    30.        
    31.     });
    Так все, разумеется, работает. Однако код получился громоздкий + много лишних действий (добавление id аж каждой строке, потом удаление всех этих по сути ненужных id).

    Соответственно, вопрос: кто-нибудь может подсказать, как сделать то же самое, но более элегантно и эффективно?

    Заранее благодарю всех откликнувшихся!
     
  2.  

Поделиться этой страницей

Загрузка...