我想根据从下拉列表中的选择显示表格的一行。
默认情况下,所有行都将被隐藏。当用户从下拉列表中进行选择时,我希望id等于选择值的行变得可见。
但是我似乎无法成功地将下拉选择值与行ID进行比较。
您能帮忙吗?
<table id = "stats" style="width: 50%;">
<caption style="caption-side: top; font-weight: bold; font-size:small; padding:20px">Michael Jordan's Stats</caption>
<tr style="color: red; font-size: large; border: 1px solid black;">
<th>Year</th>
<th>G</th>
<th>PTS</th>
<th>REB</th>
<th>AST</th>
</tr>
<tr id="84" class=hidden-cell>
<td>84-85</td>
<td>82</td>
<td>28.2</td>
<td>6.5</td>
<td>5.9</td>
</tr>
</tr>
<tr id="85" class=hidden-cell>
<td>85-86</td>
<td>18</td>
<td>22.7</td>
<td>3.6</td>
<td>2.9</td>
</tr>
<tr id="86" class=hidden-cell>
<td>86-87</td>
<td>82</td>
<td>37.1</td>
<td>5.2</td>
<td>4.6</td>
</tr>
</table>*
<select id="year">
<option value="84">84-85</option>
<option value="85">85-86</option>
<option value="86">86-87</option>
</select>
<button type="button" onclick="select_year()">Select</button>
<p>Click the button to select season</p>
<script>
function select_year()
{
var x = document.querySelector('#year').value;
var table = document.getElementById("stats");
var trs = table.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++)
{
var y = trs[i].id
if (x.intValue() == (trs[i].id).intValue())
{
//Here I want to test with an alert to confirm the compare function is
working but it is not working.
alert(x);
}
}
}
</script>
intValue()不是有效的javascript函数
尝试parseInt(),如下所示
function select_year()
{
var x = document.querySelector('#year').value;
var table = document.getElementById("stats");
var trs = table.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++)
{
var y = trs[i].id
if (parseInt(x) == parseInt(trs[i].id))
{
alert(x);
}
}
}
<table id = "stats" style="width: 50%;">
<caption style="caption-side: top; font-weight: bold; font-size:small; padding:20px">Michael Jordan's Stats</caption>
<tr style="color: red; font-size: large; border: 1px solid black;">
<th>Year</th>
<th>G</th>
<th>PTS</th>
<th>REB</th>
<th>AST</th>
</tr>
<tr id="84" class=hidden-cell>
<td>84-85</td>
<td>82</td>
<td>28.2</td>
<td>6.5</td>
<td>5.9</td>
</tr>
</tr>
<tr id="85" class=hidden-cell>
<td>85-86</td>
<td>18</td>
<td>22.7</td>
<td>3.6</td>
<td>2.9</td>
</tr>
<tr id="86" class=hidden-cell>
<td>86-87</td>
<td>82</td>
<td>37.1</td>
<td>5.2</td>
<td>4.6</td>
</tr>
</table>
<select id="year">
<option value="84">84-85</option>
<option value="85">85-86</option>
<option value="86">86-87</option>
</select>
<p>Click the button to select season</p>
<script>
function select_year(){
var x = document.querySelector('#year').value;
var table = document.getElementById("stats");
var trs = table.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++)
{
var y = trs[i].id
if (+x === +trs[i].id)
{
//Here I want to test with an alert to confirm the compare function is
//working but it is not working.
alert(x);
}
}
}
</script>
<button type="button" onclick="select_year()">Select</button>