I have used this search textBox to search from the table, it can search any text (entered in text box) from the whole table and table will show only those rows where ever searched keyword found.
Once can modify the code as per their requirement.
Add below code in your header tab of html/xml code. Actual code is in "script" tag which is handling this implementation.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#ListAllPost tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 4px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>
Filter Posts</h2>
<input id="myInput" placeholder="Search.." type="text" />
<table><thead>
<tr> <th style="width: 10%;"> Full Name </th> <th style="width: 45%;">Comment</th> <th style="width: 45%;">Place</th> </tr>
</thead> <tbody id="ListAllPost">
<tr><td>Gurjeet Singh</td> <td><a href="http://j4info.blogspot.com/p/blog-page_14.html">Enter any text in your text Box</td> <td>Click on the link to see the implementation</td> </tr>
<tr><td>J4Info</td> <td><a href="http://j4info.blogspot.com/p/blog-page_14.html">Entered text will look from this table rows and accordingly show only that rows where ever searched keyword found.</a></td><td>Click on the link to see the implementation</td> </tr>
</tbody></table>
</body></html>
</div>
Use this code for
- To add search text button in your blog
- Search text in your website
- Add Search button in table
- Search keyword from tabular data
No comments:
Post a Comment