<html lang="en">
<head>
<title>Table for Learning</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
th,td,tr{border: 1px solid #0000ff; text-align: center; border-collapse: collapse;}
table{
border: 1px solid orange; border-collapse: collapse; text-align: left;
}
tr:hover{
color: green;
}
</style>
</head>
<body>
<h1>Data From Server</h1>
<input type="text" id="search" placeholder="search here..">
<select name="" id="onSelect"></select>
<table id='mn'>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>User Name</th>
<th>Email</th>
<th>City</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(function () {
$('#onSelect').append('<option value="">select user</option>');
function getDataFromURL() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/users",
type: "GET",
success: function (response) {
console.log(response);
response.forEach(function (d) {
optObj={}
// console.log(td);
var html = '<tr><td>' + d.id + '</td><td>' + d.name +
'</td><td>' + d.username + '</td><td>' + d.email +
'</td><td>'+d.address.city+'</td></tr>';
$('table tbody').append(html);
$('#onSelect').append('<option value=' +d.username+ '>' + d.username +
'</option>');
});
},
error: function (err) {
console.log(err);
}
});
}
getDataFromURL();
$('#search').on('keyup', function () {
var searchkey = $('#search').val().toLowerCase();
$('#mn tbody tr').filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(searchkey) > -1);
});
});
$('#onSelect').on('click', function () {
var selVal = $('#onSelect').val().toLowerCase();
console.log(selVal);
$('#mn tbody tr').filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(selVal) > -1);
});
})
})
</script>
</body>
</html>
output is:
Goood work
ReplyDelete