1

DBを介してデータが入力されたテーブルがあり、そのようにレンダリングされます（「時間」、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

$("td.time")その行のテーブルセルだけでなく、クラスを持つすべてのテーブルセルを選択します。他のループtimeで行っているのと同じように、（2番目の）コンテキストパラメータとして行への参照を追加します。each$("td.time", this)

于 2010-04-30T13:43:24.140 に答える
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 に答える