Question

我从json文件中提取数据，循环遍历该文件中的每个对象，并为每个对象添加一个包含表数据的行。

在我的循环中，我检查每个json对象是否为空。

我的目标是使空对象的颜色与非空对象的颜色不同。

问题是我不能选择（用css）每一行来改变颜色。我可以选择<td>元素和其他元素，但不能选择<tr>元素。

我创建行的方式似乎导致了问题。我已经尝试先将行添加到<td>之后，然后查看堆栈溢出但未找到任何有类似问题的人。

＆＃13;

var twitchJson = 'https://gist.githubusercontent.com/QuincyLarson/2ff6892f948d0b7118a99264fd9c1ce8/raw/e9e12f154d71cf77fc32e94e990749a7383ca2d6/Twitch%2520sample%2520API%2520responses%2520in%2520array%2520form?'

$.getJSON(twitchJson, function(data) {
  for (var i = 0; i < data.length; i++) {

    if (data[i].stream) {
      var tds = '<td><img src=' + data[i].stream.logo + '></td>' +
        '<td><a href=' + data[i].stream.url + '>' +
        data[i].stream.display_name + '</a>' + '</td>' +
        '<td class="status">' + data[i].stream.status + '</td>';
      var tableBod = $('tbody');
      $(tableBod).append('<tr> class="item">')
        .append(tds).append('</tr>')

    } else if (!data[i].stream && data[i].display_name) {

      var tds = '<td><img src="http://res.cloudinary.com/dtk22y6kq/image/upload/v1500593748/download_fi6yez.jpg" alt="image not available"></td>' +
        '<td>' + data[i].display_name + '</td>' +
        '<td class="status">This channel is currently unavailable</td>'
      var tableBod = $('tbody');
      $(tableBod).append('<tr> class="item">').append(tds).append('</tr>')
    }
  }

});

＆＃13;

#content {
  border-radius: 10px;
}

#title {
  height: 100px;
  width: 90%;
  margin: 0 auto;
  background-color: darkblue;
  line-height: 100px;
  border-radius: 10px 10px 0 0;
}

h1 {
  font-family: "Impact", sans-serif;
  color: white;
  margin-left: 15%;
}

table {
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
  width: 90%;
  border-radius: 0 0 10px 10px;
}

img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  padding: 15%;
}

tr {
  background-color: #8b8b00;
}

td {
  vertical-align: middle;
}

table {
  background-color: #ffd366;
}

.item {
  color: blue;
}

a {
  margin-left: 5%;
  padding-right: 20%;
}

.status {
  font-style: italic;
  font-family: "Helvetica Neue"
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div id="title">
    <h1>Twitch Streamers</h1>
  </div>
  <table>
    <tbody>
    </tbody>
  </table>
</div>

＆＃13;

Answer 1

所以你的代码可以更清洁。真的，你唯一要做的就是根据if语句改变td。我已经整合了很多重复，让你觉得它更干净。另外，正如@Mingle Li指出的那样，tr的语法也不正确。

查看此codepen，如果您有任何疑问，请与我们联系。我改变的只是你的js：https://codepen.io/anon/pen/NgQLVQ

$.getJSON( 'https://gist.githubusercontent.com/QuincyLarson/2ff6892f948d0b7118a99264fd9c1ce8/raw/e9e12f154d71cf77fc32e94e990749a7383ca2d6/Twitch%2520sample%2520API%2520responses%2520in%2520array%2520form?', function( data ) {
    var $table = $( 'table' );

    for ( var i = 0; i < data.length; i++ ) {
        var $tr = $( '<tr class="item"></tr>' ),
            $tds;

        if ( data[i].stream ) {
            $tds = $( '<td><img src=' + data[i].stream.logo + '></td>' + '<td><a href=' + data[i].stream.url + '>' + data[i].stream.display_name + '</a>' + '</td>' + '<td class="status">' + data[i].stream.status + '</td>' );
        } else if ( !data[i].stream && data[i].display_name ) {
            $tds = $( '<td><img src="http://res.cloudinary.com/dtk22y6kq/image/upload/v1500593748/download_fi6yez.jpg" alt="image not available"></td>' + '<td>' + data[i].display_name + '</td>' + '<td class="status">This channel is currently unavailable</td>' );
        }

    // append the tds to your tr, then the tr to the table
        $tr.append( $tds );
        $table.append( $tr );
    }

} );

Answer 2

如果您检查表格，您会发现您的单元格实际上并未包含在tr元素中。那是因为您要附加tr元素，然后附加该行的单元格。

要在tr元素中附加单元格，请执行：

$(tableBod).append('<tr class="item">' + tds + '</tr>')

然后你可以添加一个容易定位不可用行的类

$(tableBod).append('<tr class="item unavailable">' + tds + '</tr>')

var twitchJson = 'https://gist.githubusercontent.com/QuincyLarson/2ff6892f948d0b7118a99264fd9c1ce8/raw/e9e12f154d71cf77fc32e94e990749a7383ca2d6/Twitch%2520sample%2520API%2520responses%2520in%2520array%2520form?'

$.getJSON(twitchJson, function(data) {
  for (var i = 0; i < data.length; i++) {

    if (data[i].stream) {
      var tds = '<td><img src=' + data[i].stream.logo + '></td>' +
        '<td><a href=' + data[i].stream.url + '>' +
        data[i].stream.display_name + '</a>' + '</td>' +
        '<td class="status">' + data[i].stream.status + '</td>';
      var tableBod = $('tbody');
      $(tableBod).append('<tr class="item">' + tds + '</tr>')

    } else if (!data[i].stream && data[i].display_name) {

      var tds = '<td><img src="http://res.cloudinary.com/dtk22y6kq/image/upload/v1500593748/download_fi6yez.jpg" alt="image not available"></td>' +
        '<td >' + data[i].display_name + '</td>' +
        '<td>This channel is currently unavailable</td>'
      var tableBod = $('tbody');
      $(tableBod).append('<tr class="item unavailable">' + tds + '</tr>')
    }
  }

});

#content {
  border-radius: 10px;
}

#title {
  height: 100px;
  width: 90%;
  margin: 0 auto;
  background-color: darkblue;
  line-height: 100px;
  border-radius: 10px 10px 0 0;
}

h1 {
  font-family: "Impact", sans-serif;
  color: white;
  margin-left: 15%;
}

table {
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
  width: 90%;
  border-radius: 0 0 10px 10px;
}

img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  padding: 15%;
}

tr {
  background-color: #8b8b00;
}

tr.unavailable {
  background-color: #eee
}

.unavailable {
  vertical-align: middle;
}

td {
  vertical-align: middle;
}

table {
  background-color: #ffd366;
}

.item {
  color: blue;
}

a {
  margin-left: 5%;
  padding-right: 20%;
}

.status {
  font-style: italic;
  font-family: "Helvetica Neue"
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div id="title">
    <h1>Twitch Streamers</h1>
  </div>
  <table>
    <tbody>
    </tbody>
  </table>
</div>

Answer 3

这是因为：

您正在追加'<tr> class="item">'，这是无效的语法。应该是$(tableBod).append('<tr class="item">')。
当您追加tr时，它会自动为您创建结束标记。因此，.append(tds)无法按预期工作。它只是将tds附加到表的末尾，而不是行。

我所做的是创建一个html变量，它存储您要追加的HTML字符串。然后我就做了$(tableBod).append(html)。

新的代码：https://codepen.io/anon/pen/dRxqEm

Answer 4

你在jquery中的语法无效，而不是

$(tableBod).append('<tr> class="item">').append(tds).append('</tr>')

但是

$(tableBod).append('<tr class="item">' + tds + '</tr>');

如何为使用jQuery动态创建的元素选择表格行？

4 个答案: