0

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

Weazly
  • 3
  • 5
  • Check the *rendered* HTML, there won't be a element with id `all-characters-template` as that's your templating engine. Check `console.log($("#all-characters-template").length)` - if it's `0` then the rest won't give anything. – freedomn-m May 21 '19 at 13:48
  • You should probably just use CSS for this anyway. – isherwood May 21 '19 at 13:55
  • Re:comment above - your question asks to find the text, but you also ask to change the colour - you don't need to find the text to change the colour: `$(".24hrs").css("background-color", "red");` (or just in your css) (note answer below where ".24hrs" is not valid). Why do you need to find the text? – freedomn-m May 21 '19 at 13:58
  • @freedomn-m i tried console.log($("#all-characters-template").length), it gave back 24, but i still can't change the color – Weazly May 22 '19 at 07:04
  • Change class name from `24hrs` to `hrs24` in the html and your code and try again – freedomn-m May 22 '19 at 07:21
  • Yes i changed it to .hours already, but still nothing – Weazly May 22 '19 at 07:23
  • @freedomn-m and i also need to find the text, because i want to check if the number is higher or lower than 0 – Weazly May 22 '19 at 07:26
  • Ah - change colour based on text. Makes a lot of sense. – freedomn-m May 22 '19 at 07:53

2 Answers2

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

Diodeus - James MacFarlane
  • 107,156
  • 31
  • 147
  • 171
0

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');
Jan Worpenberg
  • 21
  • 5