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

Question

我有一个带有悬停功能的引导表，其中填充了从 Twitch 的 JSON API 检索到的数据。

它工作得很好，但我希望基于某个 JSON 变量（无论用户是否离线）来更改表格行的颜色。

完整代码here，最相关的JS sn-ps如下：

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

offline 类具有不同的背景颜色。

问题是，随着 row.addClass down 被注释掉，其他一切都可以正常工作，但如果这些东西没有被注释掉，那么这些行就会完全消失，包括文本。似乎（通过检查器）该类根本没有添加到 tr 或 td 元素中，但由于某种原因，文本被擦除了。我只是觉得我正在查看代码的错误部分。有什么想法吗？

Answer 1

您正在查看正确的代码。请这样做。 只需将其添加到您的代码中

row.className = 'offline';

请查看更新后的代码

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

这将改变行内列的颜色

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

Answer 2

您不需要将类添加到行中，而是使用

将其添加到 row 内的所有 td

$("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"); 工作，但这不会改变行的任何颜色。您正在使用 javascript 函数而不是 jquery 获得像这样的完整行 <tr><td></td><td></td>... 这就是 row.addClass("offline"); 抛出错误的原因，因此进一步的 js 不会为此运行，因此行中没有数据