How to find the text in a table row/table data

Question

I'm trying to change the color of the text in table row with the class '24hrs'. I used jquery to find the text, but i just can't figure it out.

This is the table i'm working with

            <table class="table" id="characters-table">
            <thead>
                <tr>
                    <th>Logo</th>
                    <th>Abbreviation</th>
                    <th>Coin</th>
                    <th>Price</th>
                    <th>Market Cap</th>
                    <th>24hr</th>
                    <th>More info</th>
                </tr>
            </thead>
            <tbody>
                <template id="all-characters-template">
                    {{#Data}}
                    <tr>
                        <td><img class="img-coin" src="https://www.cryptocompare.com{{CoinInfo.ImageUrl}}"/></td>
                        <td class="character-id">{{CoinInfo.Name}}</td>
                        <td>{{CoinInfo.FullName}}</td>
                        <td>{{DISPLAY.EUR.PRICE}}</td>
                        <td>{{RAW.EUR.MKTCAP}}</td>
                        <td class="24hrs">{{DISPLAY.EUR.CHANGEPCT24HOUR}}</td>
                        <td><button class="btn btn-info character-info-btn" data-toggle="modal" data-target="#myModal">More Info</button></td>
                    </tr>
                    {{/Data}}
                </template>

I tried this, but it coudln't find anything

console.log($("#all-characters-template").closest("tr").find(".24hrs").text());

Thanks in advance

Answer 1

CSS classnames cannot start with a number.

See: Which characters are valid in CSS class names/selectors?

https://www.w3.org/TR/CSS21/grammar.html#scanner

Answer 2

As already commented you try to use the id of your template engine, not of your rendered html element. So try this instead:

$('#characters-table tbody .24hrs').css('color', 'red');