嘗試添加一個類到一個TD和跨度使用jQuery自動生成的表格

Question

我有一堆從ASP生成的表，但我沒有訪問代碼。我需要操縱一個表中的數據，特別是每行有「Date」類的第一個td和跨度。問題是他們都具有相同的價值。有沒有一種方法使用jQuery來遍歷表並添加類名稱與TD和跨度的數字？例如TD類=「第一天」，TD類=「日間2等和相同的跨度離。跨度類=」 DayDetail1" ，跨度類=‘DayDetail2’

下面是表中的一個簡單的例子

<table name="Table1"> 
    <tr class="Date"><td class="Day"><span class="DayDetail">Day 1</span></td></tr> 
    <tr><td>Event 1</td></tr> 
    <tr><td>Event 2</td></tr> 
    <tr><td>Event 3</td></tr> 

    <tr class="Date"><td class="Day"><span class="DayDetail">Day 2</span></td></tr> 
    <tr><td>Event 1</td></tr> 
    <tr><td>Event 2</td></tr> 
    <tr><td>Event 3</td></tr> 
    <tr><td>Event 4</td></tr> 

    <tr class="Date"><td class="Day"><span class="DayDetail">Day 3</span></td></tr> 
    <tr><td>Event 1</td></tr> 
    <tr><td>Event 2</td></tr> 
</table> 

Answer 1

var ctr = 1; 
 
$('tr.Date').each(function() { 
 
    $(this).find('td.Day').removeClass('Day').addClass('Day' + ctr); 
 
    $(this).find('span.DayDetail').removeClass('DayDetail').addClass('DayDetail' + ctr); 
 
    ctr++; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table name="Table1"> 
 
    <tr class="Date"> 
 
     <td class="Day"><span class="DayDetail">Day 1</span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Event 1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Event 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Event 3</td> 
 
    </tr> 
 
    <tr class="Date"> 
 
     <td class="Day"><span class="DayDetail">Day 2</span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Event 1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Event 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Event 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Event 4</td> 
 
    </tr> 
 
    <tr class="Date"> 
 
     <td class="Day"><span class="DayDetail">Day 3</span> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Event 1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Event 2</td> 
 
    </tr> 
 
</table>

Answer 2

嘗試FIDDLE

如果您有這些類static，那麼你可以簡單地從你的HTML代碼中刪除它們，如果這些類是dynamic，那麼首先使用.removeClass('Day')和.removeClass('DayDetail')並向它們添加類。我可以告訴你如何： -

var i=1;var j=1; 

    $("tr.Date td").each(function(){ 
     $(this).removeClass('Day').addClass("Day"+i); 
     i++; 
    }); 

    $("tr.Date span").each(function(){ 
     $(this).removeClass('DayDetail').addClass("DayDetail"+j); 
     i++; 
    }); 

Answer 3

// Document ready 
jQuery(document).ready(function(){ 

    var i = 1; 

    // Add new classes 
    jQuery("tr.Date > td").each(function() { 
     jQuery(this).addClass("Day" + i); 
     jQuery(this).children("span").addClass("DayDetail" + i); 
     i++; 
    }); 

    // Remove old classes 
    jQuery(".Day").removeClass("Day"); 
    jQuery(".DayDetail").removeClass("DayDetail"); 

});