Skip to content

Instantly share code, notes, and snippets.

@rabbitix

rabbitix/css_search.html

Created January 26, 2021 09:44
Show Gist options
  • Save rabbitix/98bce61d997421592b46b9a48b9515a2 to your computer and use it in GitHub Desktop.
Save rabbitix/98bce61d997421592b46b9a48b9515a2 to your computer and use it in GitHub Desktop.
Download ZIP
search in table data with css
Raw
css_search.html
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample CSS Search</title>
<style>
table{
width: 100%;
}
tr{
width: 100%;
}
td{
background-color: coral;
text-align: center;
}
.search-box{
background-color: cornflowerblue;
padding: 10px;
}
input{
padding: 7px 15px;
border: 1px solid #00000022;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="search-box">
<input type="text" placeholder="دنبال چی میگردی؟" onkeyup="gosearch(this)">
</div>
<table>
<tr class="table-row" data-search="علی فاضلی 09123456789">
<td>1</td>
<td>علی فاضلی</td>
<td>09123456789</td>
</tr>
<tr class="table-row" data-search="علی حاضری 09254789658">
<td>2</td>
<td>علی حاضری</td>
<td>09254789658</td>
</tr>
<tr class="table-row" data-search="محمد جمالی 09363547485">
<td>3</td>
<td>محمد جمالی</td>
<td>09363547485</td>
</tr>
<tr class="table-row" data-search="حسین ولیزاده 09164786597">
<td>4</td>
<td>حسین ولیزاده</td>
<td>09164786597</td>
</tr>
<tr class="table-row" data-search="قاسم ترابی 09147852369">
<td>5</td>
<td>قاسم ترابی</td>
<td>09147852369</td>
</tr>
</table>
<div id="searchCode"></div>
<script>
function gosearch(e){
if(e.value==""){
// Clear search
document.getElementById("searchCode").innerHTML="";
}
else{
document.getElementById("searchCode").innerHTML="<style>.table-row{display:none;}.table-row[data-search*='" + e.value + "']{display:table-row;}</style>";
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment