当前,我有一个项目,该项目需要使用html的<select>
标签来搜索表格。
问题:
如果我选择<select>
标记中的选项之一,则表必须删除所有不相等的行。并且只有相等的值将保留在该表上。
我一直在谷歌搜索一些解决方案,但是找不到。
但是我发现此代码仅适用于<input>
。
任何帮助将不胜感激。谢谢
HTML:
<ons-select id="choose1" style="width:97%;">
<option ng-repeat="test in test_" value="1" >Sample</option>
<option ng-repeat="test in test_" value="2" >Example</option>
</ons-select>
JAVASCRIPT:
<script>
function searchTable() {
var input, filter, found, table, tr, td, i, j;
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");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
} else {
tr[i].style.display = "none";
}
}
}
</script>
已添加:
例如。我在<select>
标签中选择了Sample,该表将仅显示具有Sample
值的行。 Example
就会消失,反之亦然。
HTML表格:
<table style="margin-top: 20px; width:100%;" id="myTable">
<tr>
<th>ID</th>
<th>Title</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">Example</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">Sample</td>
</tr>
</table>