I have a table of events. Some are ongoing and some have a specific date. The specific date is shown when the event has a date, but I need to add the text 'Ongoing Program' to the empty cells where the date would be.
The snippet I have been working on looks for the class tb2-day and should add my text to cells that don't have that class on a child element. However, it is adding the text to all cells. How can I fix this?
jQuery(document).ready(function() {
jQuery(".product-type-simple").each(function() {
if ($(this).find('.tb2-day').length) {
jQuery('<p>Ongoing<br>Program</p>').appendTo('.we-first-row');
}
});
});
td {
border: 1px solid #ccc;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="we-table">
<tbody>
<tr class="product-type-simple">
<td class="we-first-row"></td>
<td>content</td>
<td class="tb-viewdetails">
<a class="btn" href="#">info</a>
</td>
</tr>
<tr class="product-type-simple">
<td class="we-first-row"></td>
<td>content</td>
<td class="tb-viewdetails">
<a class="btn" href="#">info</a>
</td>
</tr>
<tr class="product-type-simple">
<td class="we-first-row">
<span class="tb2-day">07</span>
<span class="tb2-month">June</span>
</td>
<td>content</td>
<td class="tb-viewdetails">
<span>
<a class="btn" href="#">info</a>
</span>
</td>
</tr>
</tbody>
</table>