我试图过滤一个HTML表,这是动态的,拉使用Python构建表。我想有一个下拉菜单,让用户选择什么地区看到的HTML表。经过一番折腾,我能够找到一些使用JavaScript过滤表。它确实过滤掉了数据,但它只是隐藏了所有的行,而不是只显示下拉列表中的选择。如果我在下拉列表中选择“all”选项,它将返回所有行。我不知道为什么它不能从下拉列表中找到值。
HTML:
<p>Region:</p>
<select id="regionFilter" class='form-control'>
<option value="North">North</option>
<option value="South">South</option>
<option value="Central">Central</option>
<option value="all">All</option>
</select>
<table id="table" class="table table-striped table-bordered" style="width:25%;font-family: tahoma !important;">
<thead>
<tr>
<th>Date</th>
<th>Region</th>
<th>Forecast</th>
<th>Margin</th>
</tr>
</thead>
<tbody>
{% for row in editresults %}
<tr>
{% for cell in row %}
<td>{{ cell }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
JavaScipt:
<script>
function filterTable() {
var selectedOption = document.getElementById("regionFilter").value;
var tableRows = document.getElementById("table").getElementsByTagName("tr");
for (var i = 1; i < tableRows.length; i++) {
var tableData = tableRows[i].getElementsByTagName("td");
var hideRow = true;
if (selectedOption === "all") {
hideRow = false;
} else if (tableData[2].innerHTML === selectedOption) {
hideRow = false;
}
if (hideRow) {
tableRows[i].style.display = "none";
} else {
tableRows[i].style.display = "";
}
}
}
document.getElementById("regionFilter").addEventListener("change", filterTable);
</script>
看起来过滤器正在工作,因为如果我选择下拉列表中的“All”以外的任何值,它将过滤所有记录。似乎拖放选项中的值与表中的值不匹配。
1条答案
按热度按时间7gcisfzg1#
你检查过tableData[2].innerHTML的值了吗?数组从索引0开始,这将使Region列[1]作为第二列,而不是[2],如下所示: