jsonデータに基づいて色を変更するためのブートストラップテーブル行の取得

Question

私は、ホバー機能を備えたBootstrapテーブルを持っています。このテーブルには、TwitchのJSON APIから取得したデータが格納されています。

かなりうまく動作しますが、テーブル行が色を変更するための特定のJSON変数（ユーザーがオフラインであるかどうかにかかわらず）に基づいています。

完全なコードはhereであり、そして最も関連JSスニペットは、以下である：

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

offlineクラスは、異なる背景色を有します。

row.addClassがコメントアウトされていて、他のすべてが機能しますが、コメントアウトされていない場合、テキストを含めてこれらの行は完全に消えます。そして、（インスペクタを介して）クラスがtr要素やtd要素に全く追加されていないようですが、何らかの理由でテキストが拭き取られているようです。私はちょうど私がコードの間違った部分を見ているように感じる。何か案は？

Answer 1

あなたはotの必要はありません、これは列の内側列の色を変更します

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

更新されたコードを参照してください

row.className = 'offline'; 

ちょうどあなたのコードでこれを追加行にクラスを追加する代わりに、tdをrowの内部に追加する

$("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>

P.S row.className = 'offline';代わりrow.addClass("offline");の仕事であろうが、それは、行の任意の色を変更しないであろう。あなたはこのような完全な行を取得しています<tr><td></td><td></td>... JavaScriptの関数を使用してjqueryではないので、row.addClass("offline");はエラーを投げているので、さらにjは実行されないため、行内にはデータがありません

Answer 2

あなたは正しいコードを見ています。このようにしてください。

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