Как установить добавочные классы CSS в каждой ячейке таблицы с помощью jQuery? - PullRequest
Новая
       20

Как установить добавочные классы CSS в каждой ячейке таблицы с помощью jQuery?

1 голос
/ 30 апреля 2010

У меня есть таблица, заполненная через БД, и она выглядит так (может иметь любое количество столбцов, относящихся к «времени», 5 столбцов, 8 столбцов, 2 столбца и т. Д.): 

<table id="eventInfo">
<tr> 
     <td class="name">John</td> 
     <td class="date">Dec 20</td> 
     <td class="**time**">2pm</td>
     <td class="**time**">3pm</td>
     <td class="**time**">4pm</td>
     <td class="event">Birthday</td>                
 </tr>
 <tr> 
     <td class="name">Billy</td> 
     <td class="date">Dec 19</td> 
     <td class="**time**">6pm</td>
     <td class="**time**">7pm</td>
     <td class="**time**">8pm</td>
     <td class="event">Birthday</td>         
</tr>

В jQuery я хотел бы просмотреть каждую строку таблицы и постепенно установить дополнительное имя класса только для ячеек таблицы, где "class = 'time'", чтобы результат был: 

<table id="eventInfo">
<tr> 
     <td class="name">John</td> 
     <td class="date">Dec 20</td> 
     <td class="**time** **timenum-1**">2pm</td>
     <td class="**time** **timenum-2**">3pm</td>
     <td class="**time** **timenum-3**">4pm</td>
     <td class="event">Birthday</td>                
 </tr>
 <tr> 
     <td class="name">Billy</td> 
     <td class="date">Dec 19</td> 
     <td class="**time** **timenum-1**">6pm</td>
     <td class="**time** **timenum-2**">7pm</td>
     <td class="**time** **timenum-3**">8pm</td>
     <td class="event">Birthday</td>         
</tr>

Мне удалось только подсчитать все ячейки таблицы, где «класс =« время »», а не каждый набор в пределах его собственной строки таблицы. Вот что я пробовал с jQuery: 

$(document).ready(function() {

     $("table#eventInfo tr").each(function() {   
            var tcount = 0;
            $("td.time").attr("class", function() {
              return "timenum-" + tcount++;
            })
            //writes out the results in each TD
            .each(function() {
              $("span", this).html("(class = '<b>" + this.className + "</b>')");
            });    

        });

    });

К сожалению, это приводит только к: 

<table id="eventInfo">
<tr> 
     <td class="name">John</td> 
     <td class="date">Dec 20</td> 
     <td class="**time** **timenum-1**">2pm</td>
     <td class="**time** **timenum-2**">3pm</td>
     <td class="**time** **timenum-3**">4pm</td>
     <td class="event">Birthday</td>                
 </tr>
 <tr> 
     <td class="name">Billy</td> 
     <td class="date">Dec 19</td> 
     <td class="**time** **timenum-4**">6pm</td>
     <td class="**time** **timenum-5**">7pm</td>
     <td class="**time** **timenum-6**">8pm</td>
     <td class="event">Birthday</td>         
</tr>

Спасибо за вашу помощь!

Ответы [ 2 ]

0 голосов
/ 30 апреля 2010 
$(document).ready(function() {
     $("table#eventInfo tr").each(function() {
         $(this).children('td').addClass(function (index) {
             return 'timenum-' + (index + 1);
         }); 
     });
});
0 голосов
/ 30 апреля 2010

$("td.time") выберите все ячейки таблицы с классом time, а не только в этой строке. Добавьте ссылку на строку в качестве (второго) параметра контекста так же, как вы делаете это в другом цикле each: $("td.time", this)

...