1

我有一个通过数据库填充的表，它呈现如下（它可以有任意数量的列引用“时间”、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>

我只能让它计算“class ='time'”的所有表格单元格，而不是每个集合在它自己的表格行中。这是我用 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>

谢谢你的帮助！

4

2 回答 2

0 
$(document).ready(function() {
     $("table#eventInfo tr").each(function() {
         $(this).children('td').addClass(function (index) {
             return 'timenum-' + (index + 1);
         }); 
     });
});
于 2010-04-30T13:53:55.890 回答
0

$("td.time")选择所有具有类的表格单元格，time而不仅仅是该行中的那些。就像在另一个each循环中所做的那样，添加对该行的引用作为（第二个）上下文参数：$("td.time", this)

于 2010-04-30T13:43:24.140 回答