如何在jQuery中为每个Table Cell设置增量CSS类？

问题描述：

我有经由DB填充的表，并将其呈现像这样（它可以具有任何数量的指“时间”列，5列，8列，2列，等等）：如何在jQuery中为每个Table Cell设置增量CSS类？

<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，我想经过每个表行，并仅在表格单元格增量设置附加类的名称，其中“类=‘时间’”，这样的结果将是：

<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>

感谢您的帮助！

是什么的'span'？当你可以使用'.addClass（）'时，为什么要混淆'.html'？ http://api.jquery.com/addClass/ – dnagirl 2010-04-30 13:45:20

嗨dnagirl，感谢您的询问......以下内容仅用于我可以快速查看浏览器窗口中发生的情况，而不是实际问题的一部分。（function（）{（“span”，this）.html（“（class ='”+ this.className +“'）”）; //写出每个TD 的结果。 }）; – 2010-04-30 14:23:02

答

$("td.time")选择全部表格单元格time不仅在那一行。参考该行添加为（第二）上下文参数，就像你在其他each环做：$("td.time", this)

嗨RoToRa，谢谢！我仍在使用代码，但想让你知道这显然已经解决了我的问题。再次感谢！ – 2010-04-30 14:25:11

答

$(document).ready(function() { 
    $("table#eventInfo tr").each(function() { 
     $(this).children('td').addClass(function (index) { 
      return 'timenum-' + (index + 1); 
     }); 
    }); 
});

谢谢Matt，我喜欢'索引'的使用 - 谢谢你的帮助！ – 2010-04-30 14:34:04

如何在jQuery中为每个Table Cell设置增量CSS类？

相关推荐