在javascript中单击按钮时显示表数据行

Question

在文本框中，当用户输入名称时，它显示特定的表行，并且我还希望它显示当用户单击隐藏其他不匹配数据的按钮时。

document.getElementById("Name").addEventListener("click", myFunction());
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("Vendor_Name");
filter = input.value.toUpperCase();
table = document.getElementById("table_id");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
let tdata = td[j];
if (tdata) {
if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break;
} else {
tr[i].style.display = "none";
}
}
}
}
}

<div class="container">
<div class="sidebar">
<form action=" " method="POST" autocomplete="off" onclick="myFunction()">
{% csrf_token %}
<div>Name</div>
<div class="row" id="id_row">
<input type="text" 
name="Name" 
id="Name" 
maxlength="255"
class="form-control mb-3" 
placeholder="Name" 
id="id_Name"
required="" onkeyup="myFunction()">
</div>
<div>
<input type="submit" 
value="Apply" 
id="btn_submit" 
style=" width:72px;
height:34px;" 
class="btn btn-success btn" 
onclick="myFunction()">
<input type="reset" 
value="Reset" 
id="btn_submit" 
style=" width:72px;
height:34px;" 
class="btn btn-success btn">
</div>
</form>
</div>
<table>
<thead>
<th> Country</th>
<th> Region</th>
<th> name</th>
</thead>
<tbody>
<tr>
<td>US</td>
<td>Northamerica</td>
<td>Dell</td>
</tr>
</tbody>
</table>
</div>

当用户搜索"fox"在搜索框中出现匹配的表行，另外，我想在单击按钮时只显示特定的匹配表行。

当我点击按钮时，它只显示匹配的表行一秒钟，并显示所有行。

Answer 1

我使用了这个代码

编辑:

我们不能在同一代码中同时使用clickonkeyup ?

是的，检查这个编辑。

$(document).ready(function(){
$("#Name").on("keyup", function() {
search('#Name');
});

$("#btn_submit").on("click", function() {
search('#Name');
});

$("#btn_reset").on("click", function() {
$("#Name").val('');
search('#Name');
});
});
function search(input){
var value = $(input).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="sidebar">
<!--<form action=" " method="POST" autocomplete="off" onclick="myFunction()">-->
{% csrf_token %}
<div>Name</div>
<div class="row" id="id_row">
<input type="text" 
name="Name" 
id="Name" 
maxlength="255"
class="form-control mb-3" 
placeholder="Name" 
id="id_Name"
required="" autocomplete="off">
</div>
<div>
<input type="button" 
value="Apply" 
id="btn_submit" 
style=" width:72px;
height:34px;" 
class="btn btn-success btn">
<input type="reset" 
value="Reset" 
id="btn_reset" 
style=" width:72px;
height:34px;" 
class="btn btn-success btn">
</div>
<!--</form>-->
</div>
<table>
<thead>
<th> Country</th>
<th> Region</th>
<th> name</th>
</thead>
<tbody id="myTable">
<tr>
<td>US</td>
<td>Northamerica</td>
<td>Dell</td>
</tr>
<tr>
<td>AE</td>
<td>Dubai</td>
<td>HP</td>
</tr>
<tr>
<td>EG</td>
<td>Cairo</td>
<td>Lenovo</td>
</tr>
<tr>
<td>UK</td>
<td>London</td>
<td>IBM</td>
</tr>
</tbody>
</table>
</div>