Question

我正在建立一个模拟篮球统计表，我希望用户能够设置最低比赛次数要求。这是到目前为止，我在这里发现的各种类似的类似问题中所得到的答案：

<form> 
<p>Minimum Games Played?</p> 
<input type="number" name="gamesnumber"><br> 
</form>

function view(){
 var x = document.getElementsByClassName("games")
 for(var i = 0; i < x.length; i++){
  if(x[i].value < gamesnumber){
   x[i].closest(".item-row").style.visibility = "visible";
  }else{
   x[i].closest(".item-row").style.visibility = "collapse";
  }
 }
}
</script>

<html>
<head><title>Per Game Stats</title></head>
<body background="" bgcolor=#FFFFFF text="#000000" link=#000000 vlink=#000000>
<tr><td align="center"><hr></td></tr>
<tr><td align="center" width="100%"><div align="center"><b><u>Player Statistics</u></b></div></td></tr>
<tr><td align="center" width="100%"><div align="center"><center><table border="0">
<thead><tr><th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><b><u>ID</u></b></font></th>
<th width="100" bgcolor=#E85757 align="left"><font size="2" color="#FFFFFF"><u><b>Team</b></u></font></th>
<th width="150" bgcolor=#E85757 align="left"><font size="2" color="#FFFFFF"><u><b>Name</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>Pos</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>G</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>M</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>P</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>R</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>A</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>S</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>B</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>T</b></u></font></th>
<th width="50" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>FG%</b></u></font></th>
<th width="50" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>FT%</b></u></font></th>
<th width="50" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>3P%</b></u></font></th></thead><tbody>
<tr><td width="30" align="center"><font size="2">503</font></td>
<td width="150" align="left"><font size="2"><a href="./rosters/roster6.htm">Washington Bullets</a></font></td>
<td width="150" align="left"><font size="2"><a href="./players/player503.htm">Aaron Holiday</a></font></td>
<td width="30" align="center"><font size="2">PG</font></td>
<td class="games" width="30" align="center"><font size="2">40</font></td>
<td width="30" align="center"><font size="2">12.2</font></td>
<td width="30" align="center"><font size="2">4.2</font></td>
<td width="30" align="center"><font size="2">1.3</font></td>
<td width="30" align="center"><font size="2">2.7</font></td>
<td width="30" align="center"><font size="2">0.4</font></td>
<td width="30" align="center"><font size="2">0.1</font></td>
<td width="30" align="center"><font size="2">1.1</font></td>
<td width="50" align="center"><font size="2">.407</font></td>
<td width="50" align="center"><font size="2">.692</font></td>
<td width="50" align="center"><font size="2">.489</font></td>
<tr><td width="30" align="center"><font size="2">461</font></td>
<td width="150" align="left"><font size="2"><a href="./rosters/roster26.htm">Portland Trailblazers</a></font></td>
<td width="150" align="left"><font size="2"><a href="./players/player461.htm">Ajdin Penava</a></font></td>
<td width="30" align="center"><font size="2">C</font></td>
<td class="games" align="center"><font size="2">82</font></td>
<td width="30" align="center"><font size="2">27.6</font></td>
<td width="30" align="center"><font size="2">6.6</font></td>
<td width="30" align="center"><font size="2">8.0</font></td>
<td width="30" align="center"><font size="2">1.0</font></td>
<td width="30" align="center"><font size="2">0.5</font></td>
<td width="30" align="center"><font size="2">0.8</font></td>
<td width="30" align="center"><font size="2">0.8</font></td>
<td width="50" align="center"><font size="2">.414</font></td>
<td width="50" align="center"><font size="2">.841</font></td>
<td width="50" align="center"><font size="2">.391</font></td>
<tr><td width="30" align="center"><font size="2">203</font></td>
<td width="150" align="left"><font size="2"><a href="./rosters/roster23.htm">Golden State Warriors</a></font></td>
<td width="150" align="left"><font size="2"><a href="./players/player203.htm">Alex Abdul-Wahad</a></font></td>
<td width="30" align="center"><font size="2">SG</font></td>
<td class="games" width="30" align="center"><font size="2">0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="50" align="center"><font size="2">.000</font></td>
<td width="50" align="center"><font size="2">.000</font></td>
<td width="50" align="center"><font size="2">.000</font></td>
</tbody></table></center></div></td></tr>
</body>
</html>

但是以表格形式输入值无济于事。我在正确的轨道上吗？完全还有其他东西吗？

提前谢谢！：）

Answer 1

首先，您的表单和脚本标签必须位于body标签内。您的带有类游戏的元素是td标签，因此此标签没有value属性，而是具有innerText属性，接下来，您不会在任何地方调用视图函数。将您的代码更改为此（我只写您必须更改的代码）：

<form> 
<p>Minimum Games Played?</p> 
<input type="number" name="gamesnumber" id="gamesnumber"><br> 
</form>

还有这个javascript

<script type="text/javascript">
function view(){
var gamesnumber = document.getElementById("gamesnumber").value || 0; //this is valid because is a textinput, we add 0 as default value
 var x = document.getElementsByClassName("games");
 for(var i = 0; i < x.length; i++){
  if(x[i].innerText < gamesnumber){
   x[i].closest(".item-row").style.visibility = "visible";
  }else{
   x[i].closest(".item-row").style.visibility = "collapse";
  }
 }
}
window.addEventListener("load", function(){
    //we add this event listener because your input element tecnically doesn't exist until page is loaded
    var input_games = document.getElementById("gamesnumber");
    input_games.addEventListener("input", view); //we call this function every time input value changes

});
</script>

Answer 2

<input type="number" name="gamesnumber" onchange="view()"><br>

在您的输入中有一个onchange事件调用，因此只要您输入文本框中的某些内容，就会调用define（view）函数

此外，更改条件时，更改view（）函数以隐藏相应的行。

更改的功能：

function view(){
 var gamesnumber = document.getElementsByName("gamesnumber")[0].value;
 var x = document.getElementsByClassName("games")
 for(var i = 0; i < x.length; i++){
  if(x[i].innerText < gamesnumber){
   x[i].parentElement.style.visibility = "visible";
  }else{
   x[i].parentElement.style.visibility = "collapse";
  }
 }
}

编辑： 由于这是onchange()事件，因此键入后应单击某个地方或按Tab键触发该功能，如果要键入，也可以使用onblur或onkeyup()。

有关此类触发事件的更多信息，请参见：https://www.w3schools.com/jsref/event_onkeyup.asp

根据用户输入隐藏HTML行

2 个答案: