<div class="container">
<div class="search">
<input type="text" id="myInput" placeholder="Поиск">
</div>
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Mail</td>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>20</td>
<td><a href="mailto:ivan@mail.com">ivan@mail.com</a></td>
</tr>
<tr>
<td>Olga</td>
<td>18</td>
<td><a href="mailto:olya@mail.com">olya@mail.com</a></td>
</tr>
<tr>
<td>Stev</td>
<td>22</td>
<td><a href="mailto:stepa@mail.com">stepa@mail.com</a></td>
</tr>
<tr>
<td>Jeanne</td>
<td>32</td>
<td><a href="mailto:janna@mail.com">janna@mail.com</a></td>
</tr>
<tr>
<td>Ekaterina</td>
<td>27</td>
<td><a href="mailto:katy@mail.com">katy@mail.com</a></td>
</tr>
<tr>
<td>Дарья</td>
<td>31</td>
<td><a href="mailto:dasha@mail.com">dasha@mail.com</a></td>
</tr>
</tbody>
</table>
</div>
html {
width: 100%;
height: 100%;
}
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font: 20px/28px 'Verdana'
}
.container {
width: 80%;
.search {
width: 100%;
margin-bottom: 12px;
input {
font: 16px/16px 'Verdana';
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
padding: 12px 20px;
outline: none;
&:focus {
border-color: #4b99f2;
}
}
}
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #eee;
thead {
color: #fff;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
background: #333;
}
tbody {
tr {
&:nth-of-type(even) {
background: #eee;
}
}
}
td {
padding: 4px 12px;
a {
color: #4b99f2;
text-decoration: none;
}
}
}
}
View Compiled
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
This Pen doesn't use any external CSS resources.