I am creating a simple data table where it shows me the values of tracking from a firebase realtime database I am generating the table via JavaScript. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Build a table</title>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-database.js"></script>
</head>
<body>
<div class="container">
<input id="searchbar"
onkeyup="search_animal()"
type="text" name="search"
placeholder="Search item..">
</div>
<script>
// JavaScript code
function search_animal() {
let input = document.getElementById('searchbar').value
input = input.toLowerCase();
let x = document.getElementsByClassName('pritem');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
}
else {
x[i].style.display = "xx";
}
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
#searchbar {
margin: 10px;
padding: 10px;
border-radius: 5px;
width: 50%;
box-sizing: border-box;
}
#list {
list-style: none;
padding: 0;
margin: 0;
}
.animals {
font-size: 1.2em;
padding: 10px;
border-bottom: 1px solid #ccc;
animation: fadeIn 0.5s ease-in-out;
}
.animals:last-child {
border-bottom: none;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<button onclick="addData()">CLICK ME</button>
<style>
table {
text-align: center;
}
</style>
<table id = "list">
<tbody id = 'xx'>
<th width = 200 >Requesting Office</th>
<th width = 200 >Mayor's Office</th>
<th width = 200 >Treasury Office</th>
<th width = 200 >Budget Office</th>
<th width = 200 >Mayor's Office</th>
</tbody>
</table>
</body>
<script src="build-table.js"></script>
</html>
For the generation of table here is my code:
function generateTable(table, data) {
for (let element of data) {
let row = table.insertRow();
for (key in element) {
let cell = row.insertCell();
row.setAttribute('class', "pritem")
let text = document.createTextNode(element[key]);
cell.appendChild(text);
}
}
}
I am hauling the files from my realtime database values as follows:
firebase.initializeApp(firebaseConfig);
var ltbmofiles = firebase.database().ref("prLTBMO");
ltbmofiles.on("value", function(snapshot) {
var placementObjectrValuesSplit = Object.values(snapshot.val())
valueMax = placementObjectrValuesSplit
// will show undefined if not defined or not yet present
for (var x = 0; x <= placementObjectrValuesSplit.length-1; x++) {
mountains.push(placementObjectrValuesSplit[x]);
console.log(placementObjectrValuesSplit[x])
}
let table = document.querySelector("table");
// let data = Object.keys(mountains[0]);
// generateTableHead(table, data);
generateTable(table, mountains);
})
My problem with my code is this:
- while it shows my search quite properly when I search “treasury” for example, it shows the treasury row searched. However, when you clear the search bar, it does not show the full table again and whenever you search a word it doesn’t show anything anything anymore. Any ideas why this happens and how can I fix it?
I tried putting the tag properly from the row, while it shows me the item properly, it disappears.