Skip to content
Advertisement

Change HTML item_status Class in javascript

Hello i have HTML below:

<table border="1" cellpadding="5" class="product-data" rules="all"><tbody>
<tr><td class="item_price">$ 3.99</td> </tr>
<tr class="" style="color: #aaaaaa; text-decoration: line-through;"><td class="item_beforeprice">$ 39.95</td></tr>
<tr></tr>
<tr class="hidden"><td class="item_status">Sold</td></tr>
<tr><td></table>

And then if my page was loaded and see the Sold text i want to change the:

<td class="item_status">Sold</td>

To:

<td class="item_status sold-status">Sold</td>

and if the code is:

<td class="item_status">Offer</td>

Change to:

<td class="item_status offer-status">Offer</td>

Thank you before

Advertisement

Answer

Just add class to your .item-status, if you use jQuery:

$(function () {
    $('.item_status').addClass('sold-status');
})

With pure javascript:

document.querySelector('.item_status').classList.add('sold-status');

Update: Detect sold text With jQuery:

$('.product-data td').each(function () {
   if ($(this).text().toLowerCase() == 'sold') {
        $(this).addClass('sold-status');
   }
})

With pure Javascript

var td = document.querySelectorAll('.product-data td');
td.forEach(function(element) {
   if (element.innerText.toLowerCase() === 'sold') {
       element.classList.add('sold-status');
   }
})
Advertisement