I am getting a .json data from a website and printing that data as a list. When I write for example "a" in a search box I want it to filter the list and show the results in the table.
So far i have written this code with taking the filter from w3 schools platform but I can't filter the list for some reason.
<!DOCTYPE html>
< html >
< head >
< meta name="viewport" content="width=device-width, initial-scale=1" >
< style >
*{
box-sizing: border-box;
}
#myInput
{
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
< /style >
</ head >
< body >
< input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ara.." title="arama yapın" >
< ?php
echo " < table id=MyTable > ";
echo " < tr class=header > ";
echo " < th>Id< /th >";
echo "< th> < pre > < /pre > < /th >";
echo "< th> Bin</ th>";
echo "< th> < pre > < /pre > < /th >";
echo "< th>Tür< /th >";
echo "< th > < pre > < /pre>< /th>";
echo "< th>Banka Adı< /th>" ;
echo "< th> < pre> < /pre> < /th>";
echo "< th> Type < /th>";
echo "< th> < pre> < /pre> < /th>";
echo "< th> Name < /th>";
echo "< th> < pre> < /pre> < /th>";
echo "< th> Oluşturma Tarihi < /th>";
echo "< th> < pre> < /pre> < /th>";
echo "< th> Güncelleme Tarihi < /th>";
echo "< /tr >";
$json_url = "websitename";
$json = file_get_contents($json_url);
$data = json_decode($json, TRUE);
foreach($data as $record)
{
echo " < tr> ";
echo "< td>" .$record["id"]. "< td>";
echo "< td>" .$record["bin"]. "< td>";
echo "< td>" .$record["tur"]. "< td>";
echo "< td>" .$record["banka_adi"]. "< td>";
echo "< td>" .$record["type"]. "< td>";
echo "< td>" .$record["name"]. "< td>";
echo "< td>" .$record["created_at"]. "< td>";
echo "< td>" .$record["updated_at"]. "< td>";
echo "< /tr>";
}
echo "< /table>";
?>
< script>
function myFunction()
{
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i )
{
td = tr[i].getElementsByTagName("td")[5];
if (td)
{
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1)
{
tr[i].style.display = "";
}
else
{
tr[i].style.display = "none";
}
}
}
}
< /script>
CodePudding user response:
- MyTable, not myTable
- Loose Hex 0A in your JavaScript
The code can however be simplified
window.addEventListener("load", () => {
document.getElementById("myInput").addEventListener("input", e => {
const filter = e.target.value.toUpperCase();
document.querySelectorAll("#MyTable tbody tr")
.forEach(row => {
row.hidden = filter && !row.cells[5].textContent.toUpperCase().includes(filter)
})
})
})
window.addEventListener("load", () => {
document.getElementById("myInput").addEventListener("input", e => {
const filter = e.target.value.toUpperCase();
document.querySelectorAll("#MyTable tbody tr")
.forEach(row => {
row.hidden = filter && !row.cells[5].textContent.toUpperCase().includes(filter)
})
})
})
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<input type="text" id="myInput" placeholder="Ara.." title="arama yapın" autocomplete="off" />
<table id="MyTable">
<thead>
<tr class="header">
<th>Id</th>
<th>Bin</th>
<th>Tür</th>
<th>Banka Adı</th>
<th>Type</th>
<th>Name</th>
<th>Oluşturma Tarihi</th>
<th>Güncelleme Tarihi</th>
</tr>
</thead>
<tbody>
<tr>
<td>Id</td>
<td>Bin</td>
<td>Tür</td>
<td>Banka Adı</td>
<td>Type</td>
<td>Name AAAA</td>
<td>Oluşturma Tarihi</td>
<td>Güncelleme Tarihi</td>
</tr>
<tr>
<td>Id</td>
<td>Bin</td>
<td>Tür</td>
<td>Banka Adı</td>
<td>Type</td>
<td>Name BBBB/td>
<td>Oluşturma Tarihi</td>
<td>Güncelleme Tarihi</td>
</tr>
<tr>
<td>Id</td>
<td>Bin</td>
<td>Tür</td>
<td>Banka Adı</td>
<td>Type</td>
<td>Name CCCC</td>
<td>Oluşturma Tarihi</td>
<td>Güncelleme Tarihi</td>
</tr>
</tbody>
</table>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
Here is your fixed version
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
console.log(filter)
for (i = 0; i < tr.length; i ) {
td = tr[i].getElementsByTagName("td")[5];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<input type="text" id="myInput" placeholder="Ara.." onkeyup="myFunction()" title="arama yapın" autocomplete="off" />
<table id="myTable">
<thead>
<tr class="header">
<th>Id</th>
<th>Bin</th>
<th>Tür</th>
<th>Banka Adı</th>
<th>Type</th>
<th>Name</th>
<th>Oluşturma Tarihi</th>
<th>Güncelleme Tarihi</th>
</tr>
</thead>
<tbody>
<tr>
<td>Id</td>
<td>Bin</td>
<td>Tür</td>
<td>Banka Adı</td>
<td>Type</td>
<td>Name AAAA</td>
<td>Oluşturma Tarihi</td>
<td>Güncelleme Tarihi</td>
</tr>
<tr>
<td>Id</td>
<td>Bin</td>
<td>Tür</td>
<td>Banka Adı</td>
<td>Type</td>
<td>Name BBBB</td>
<td>Oluşturma Tarihi</td>
<td>Güncelleme Tarihi</td>
</tr>
<tr>
<td>Id</td>
<td>Bin</td>
<td>Tür</td>
<td>Banka Adı</td>
<td>Type</td>
<td>Name CCCC</td>
<td>Oluşturma Tarihi</td>
<td>Güncelleme Tarihi</td>
</tr>
</tbody>
</table>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>