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

Доброго времени суток!

Ситуация обстоит следующим образом: на странице есть несколько таблиц с классом ".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).

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

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