我有一个搜索过滤器，我想用它来查找我的页面上的频道，因为用户正在键入它。但是，在调用此API时，我无法将每个对象分成不同的行，因为通道对象都存储在表数据的同一行中。我将对象存储在各自的表数据中，但不知道解决此问题的具体方法。我应该使用for循环还是在HTML中添加更多表数据？您可以查看我的codepen并删除注释括号以在我的函数中运行最后一个for循环以获得一个想法。 https://codepen.io/baquino1994/pen/EvLrPV HTML：
<head>
<link href="https://fonts.googleapis.com/css?family=Saira+Condensed" rel="stylesheet">
</head>
<body>
<div class='container-fluid'>
</div>
<div class='text-center' id="border">
<h1 id="font">Twitch TV JSON API</h1>
<h2 id="fcc" target="_blank"></h2>
</div>
<!-- <div class='spacer'></div>
<div id="border">
<div class='row'>
<div class='col-md-3' id='channel'>
Channel:<br>
</div>
<div class='col-md-3' id='status'>
Status:<br>
</div>
<div class='col-md-3' id='game'>
Game:<br>
</div>
<div class='col-md-3' id="logo">
Logo:
</div> -->
<!-- <div id='follower'>Remove me<div> -->
<!-- </div> -->
<div class="container">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Channel.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:25%;color:#FAF0E6">Channel</th>
<th style="width:25%;color:#FAF0E6">Status</th>
<th style="width:25%;color:#FAF0E6">Game</th>
</tr>
<tr>
<td id="channel"style="color:red"></td>
<td id="status"></td>
<td id="game"></td>
</tr>
</table>
</div>
<div class='spacer'></div>
<!-- </div> -->
</body>
CSS
body{
background-image:url('https://www.twitch.tv/p/assets/uploads/combologo_474x356.png');
}
#border {
background-color: #000000;
color: white;
padding: 50px;
width: 35%;
margin-right: auto;
margin-left: auto;
border-radius: 0px;
font-size: 1.5em;
padding-bottom: 2%;
}
a{
color:white;
}
.spacer {
padding: 1%;
}
/* * {
box-sizing: border-box;
} */
#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid red;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
background-color:black;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
color:red;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#channel{
color:red;
}
#font, #fcc, .header, #channel, #status, #game {
font-family: 'Saira Condensed', sans-serif;
}
.intro{
color:green;
}
JS
$(function() {
var follower = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin"];
//An array of users or in this case, streamers that will be placed on the document.
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/kraken/streams/freecodecamp',
headers: {
'client-ID': 'ziu3fledjh14rd812socrwluiz1o31'
},
// Twitch requires a client id to request their data now. You can bypass this by using the https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2?callback=? url to request certain objects. However, some objects won't be available if you do choose to bypass registering for a client_id.
success: function(data) {
if (data.stream === null) {
$('#fcc').html(' FreeCodeCamp is Offline');
} else {
$('#fcc').html(' FreeCodeCamp is Online!');
}
},
error: function(err) {
alert("Error");
}
});
for (var i = 0; i < follower.length; i++) {
//change this to get
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/kraken/streams/' + follower[i],
headers: {
'client-ID': '59x9ex7f5zzongzntqx0zrwleoxy12'
},
//You could also use $.getJSON and use the client_Id as a token to request Twitch's objects.
success: function(dataI) {
var name = dataI._links.self.slice(37)
if (dataI.stream === null) {
$('#status').append(' is Offline<br>')
$('#channel').append('<a target="blank" href="https://www.twitch.tv/' + name + '">' + name + '</a><br>')
$('#game').append('N/A<br>');
} else {
$('#status').append(' is Online<br>')
$('#channel').append('<a target="blank" href="https://www.twitch.tv/' + name + '">' + name + '</a><br>')
$('#game').append(dataI.stream.game + '<br>');
}
},
error: function(err) {
alert("Error: One or more users is no longer avaialble");
}
});
}
// for(var i=0; i< follower.length;i++){
// $.ajax({
// type:'GET',
// url:'https://api.twitch.tv/kraken/channels/'+ follower[i],
// headers:{
// 'client-ID': '59x9ex7f5zzongzntqx0zrwleoxy12'
// },
// success: function(d2){
// var logo = d2.logo;
// if(d2.logo == null){
// $('#logo').append('<img src= http://jesusldn.com/wp-content/uploads/2015/06/noimage.png>')
// }
// else{
// $("#logo").append('<img src='+logo+">'")
// }
// }
// });
// }
})
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
我提供了一个指向我的codepen的链接，因为它有Jquery插件和Bootstrap。
答案 0 :(得分：0)
你的过滤器就像一个魅力。问题在于创建表。
您需要更新代码才能动态添加<tr>到表格。
从html中删除tr：
<div class="container">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Channel.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:25%;color:#FAF0E6">Channel</th>
<th style="width:25%;color:#FAF0E6">Status</th>
<th style="width:25%;color:#FAF0E6">Game</th>
</tr>
</table>
</div>
<div class='spacer'></div>
将您的成功方法更改为：
success: function(dataI) {
var name = dataI._links.self.slice(37)
console.log(follower);
if (dataI.stream === null) {
$('#myTable').append('<tr>'+
'<td><a target="blank" href="https://www.twitch.tv/'+name + '">' + name +
'<td>is Offline</td>'+
'</a></td>'+
'<td>NA</td>');
} else {
$('#myTable').append('<tr>'+
'<td><a target="blank" href="https://www.twitch.tv/'+name + '">' + name +
'<td>is online</td>'+
'</a><'+
'<td>NA</td>');
}
},