获取引导表行以根据JSON数据更改颜色

Question

I have a Bootstrap table with hover functionality, that populates with data retrieved from Twitch's JSON API.

It works fairly well, but I want, based off of a certain JSON variable (whether or not the user is offline) for the table row to change colors.

The full code is here , and the most relevant JS snippets is below:

if (gameContent == null) {
      statusText = "Offline...";
      gameText = "Nothin'";
      row.addClass("offline");
      $("td", row).each(function() {
        $(td).addClass("offline");
      });
}

The offline class has a different background color.

The thing is, with row.addClass down being commented out, everything else works, but if those things aren't commented out, then those rows disappear completely, including text. And it seems like (through the Inspector) the class isn't being added to the tr or td elements at all, but for some reason, the text is getting wiped instead. I just feel like I'm looking at the wrong portion of the code. Any ideas?

Answer 1

You don't need ot add class to the row instead add it to all the td inside row using

$("td", row).each(function() {
            $(this).addClass("offline");
});

updated codepen

 //jquery $(document).ready(function() { //streamers var streamers = [ "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "no_account_friend" ]; var num_streamers = streamers.length; //fcc info/call var url = "https://wind-bow.gomix.me/twitch-api/channels/"; var gameUrl = "https://go.twitch.tv/directory/game/"; var tbody = document.getElementById("streamers"); //stream parser function add_row(url_parsed) { $.getJSON( url_parsed, function(data) { if (data.status === 404) { return; } //set logo, status, game var logoImg = data.logo; var statusContent = data.status; var gameContent = data.game; if (logoImg == null) { logoImg = "https://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_600x600.png"; } //insert rows/cells var row = tbody.insertRow(tbody.rows.length); var logo = row.insertCell(0); var name = row.insertCell(1); var status = row.insertCell(2); var game = row.insertCell(3); //set text/html for cells var logoText = "<img src='" + logoImg + "' alt='" + data.display_name + " logo' height=50 width=50>"; var nameText = "<a href='" + data.url + "'>" + data.display_name + "</a>"; var statusText, gameText; //check if game is null if (gameContent == null) { statusText = "Offline..."; gameText = "Nothin'"; /* --problem code here*/ // row.addClass("offline"); // row.className ="offline"; $("td", row).each(function() { $(this).addClass("offline"); }); } else { statusText = statusContent; gameText = "<a href='" + gameUrl + gameContent + "'>" + gameContent + "</a>"; } $(logo).append(logoText); $(name).append(nameText); $(status).append(statusText); $(game).append(gameText); } ); } //end add_row //for each streamer in list for (i = 0; i < num_streamers; i++) { add_row(url + streamers[i] + "?callback=?"); } }); 

 @import url('https://fonts.googleapis.com/css?family=Play|Bungee+Shade'); header { font-family: "Bungee Shade", Arial, sans-serif; } body { background-color: #a895cc; } table { font-family: "Play", Arial, sans-serif; text-align: left; } .offline { background-color: #aeb2b2; } th { background-color: #cc949d; } td { background-color: #94ccc3; } tr:hover td { background-color: #b9d38d; } img { border-radius: 10px; } thead { background-color: #8e9cb2; } tbody { background-color: #afc0db; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container text-center"> <header> <h1>Twitch Streamers via Twitch API</h1> <h2>Coming to you from Free Code Camp</h2> </header> <table class="table table-hover"> <thead> <tr> <th> Logo: </th> <th> Display Name: </th> <th> Streaming: </th> <th> Game/Activity: </th> </tr> </thead> <tbody id="streamers"> </tbody> </table> </div> 

PS row.className = 'offline'; will work instead of row.addClass("offline"); but that won't change any colour of row. You are getting complete row like this <tr><td></td><td></td>... using javascript function and not jquery that's why row.addClass("offline"); is throwing error and thus further js don't run for that thus no data in row

Answer 2

You looking at the correct code. please do like this. Just add this in your code

row.className = 'offline';

Please see the updated code

if (gameContent == null) {
      statusText = "Offline...";
      gameText = "Nothin'";
      row.className = 'offline';

this will change the color of the columns inside the row

tr.offline td{
    background-color: red;
}