时间戳

首页 > 解决方案 > 根据用户输入隐藏 HTML 行

html - 根据用户输入隐藏 HTML 行

问题描述

我正在建立一个模拟篮球统计数据表，我希望用户能够设置最低游戏要求。到目前为止，这是我从在这里找到的各种模糊相似的问题拼凑而成的：

<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>

但是在表单中输入值什么都不做。我在正确的轨道上吗？完全不同的东西？

提前致谢！:)

标签： htmlhtml-table

解决方案

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

在您的输入中有一个 onchange 事件调用，因此一旦您在文本框中输入内容，就会调用 defined(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

推荐阅读