Попытка добавить класс к TD и Span в автоматически сгенерированную таблицу с помощью jQuery

Question

У меня есть куча таблиц, создаваемых из ASP, но у меня нет доступа к коду. Мне нужно манипулировать данными в одной таблице, в частности, с первым td и диапазоном каждой строки, которая имеет класс «Дата». Проблема в том, что все они имеют одно и то же значение класса. Есть ли способ использования jquery для итерации по таблице и добавления добавления имени класса с номером для TD и Span ??? Пример тд класс = «День 1», тд класс = «День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"); 

});