I have the following code that will be displayed as a table. I want to filter this content by year through my <select id="ano">
.
All those constants are table rows <tr>
.
It is, when I select the <option>
2018 I want to display as a <tr>
ONLY those constants which contains the number "2018" within the "Data" variable.
PS: I don't wanna "hide" what is not "2018". I want to "show" what is "2018" ONLY.
<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body >
<section id="container">
<div id="select_calendario">
<div>
<select id="ano">
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
</div>
</div>
<div id="div_calendario_jogos">
<table id="table_calendario_jogos">
<tbody>
<tr id="table_header">
<th>Data</th>
<th>Hora</th>
<th>Oponente</th>
<th>Placar</th>
<th>Torneio</th>
</tr>
</tbody>
<tbody id="tbody_calendario_jogos">
</tbody>
</table>
</div>
</section>
<script>
LSB_2018_JOGO_1: {
Data: "11/03/2019",
Hora: "15:00",
Oponente: "BMC",
Placar: "V, 52-42",
Torneio: "LSB",
},
LSB_2018_JOGO_2: {
Data: "08/04/2018",
Hora: "12:30",
Oponente: "Drink Team",
Placar: "D, 59-61",
Torneio: "LSB",
},
LSB_2018_JOGO_3: {
Data: "22/04/2019",
Hora: "10:30",
Oponente: "Nitcheroy Ballers",
Placar: "V, 53-40",
Torneio: "LSB",
},
TUC_2018_JOGO_1: {
Data: "11/08/2018",
Hora: "12:30",
Oponente: "Unirio",
Placar: "D, 30-60",
Torneio: "TUC",
},
TUC_2018_JOGO_2: {
Data: "15/09/2019",
Hora: "17:10",
Oponente: "UFRJ Aecs",
Placar: "V, 29-25",
Torneio: "TUC",
},
TUC_2018_JOGO_3: {
Data: "20/10/2018",
Hora: "16:00",
Oponente: "UERJ Economia",
Placar: "V, 49-30",
Torneio: "TUC",
}
};
const tbody = document.getElementById('tbody_calendario_jogos');
for (const key in jogos2018) {
const tr = document.createElement('tr');
for (const item in jogos2018[key]) {
const td = document.createElement('td');
td.textContent = jogos2018[key][item];
tr.appendChild(td);
}
tbody.appendChild(tr);
}
</script>
</body>
</html>
I didn't know the values you wanted to display, so I just displayed the dates:
EDIT: Just add more <td>
elements for every property you want to display inside the check
document.getElementById("ano").addEventListener("change", function(e) {
const tbody = document.getElementById('tbody_calendario_jogos')
while (tbody.firstChild) {
console.log(tbody.firstChild)
tbody.removeChild(tbody.firstChild)
}
for (key in data) {
const re = new RegExp(`${e.target.value}`)
const isVal = re.exec(data[key].Data)
if (isVal != null) {
const obj = data[key]
const tr = document.createElement('tr')
const tdData = document.createElement('td')
tdData.textContent = obj.Data
const tdHora = document.createElement('td')
tdHora.textContent = obj.Hora
const tdOponente = document.createElement('td')
tdOponente.textContent = obj.Oponente
const tdPlacar = document.createElement('td')
tdPlacar.textContent = obj.Placar
const tdTorneio = document.createElement('td')
tdTorneio.textContent = obj.Torneio
tr.appendChild(tdData)
tr.appendChild(tdHora)
tr.appendChild(tdOponente)
tr.appendChild(tdPlacar)
tr.appendChild(tdTorneio)
tbody.appendChild(tr)
}
}
})
EDIT 2: If you want a more concise way of doing this (note: the order of properties matter in this method [aka top is rendered first, bottom is rendered last]) replace the contents of if (isVal != null) { ... }
with :
const obj = data[key]
const tr = document.createElement('tr')
for (value of Object.values(obj)) {
const td = document.createElement('td')
td.textContent = value
tr.appendChild(td)
console.log(value)
}
tbody.appendChild(tr)
This activates every time the value of the select
changes (aka whenever the user chooses an option), removes all elements of "tbody_calendario_jogos"
, uses Regex to filter the correct objects by their year and displays them.
PS: I organized your data into this for the code to work:
const data = {
LSB_2018_JOGO_1: {
Data: "11/03/2019",
Hora: "15:00",
Oponente: "BMC",
Placar: "V, 52-42",
Torneio: "LSB",
},
LSB_2018_JOGO_2: {
Data: "08/04/2018",
Hora: "12:30",
Oponente: "Drink Team",
Placar: "D, 59-61",
Torneio: "LSB",
},
LSB_2018_JOGO_3: {
Data: "22/04/2019",
Hora: "10:30",
Oponente: "Nitcheroy Ballers",
Placar: "V, 53-40",
Torneio: "LSB",
},
TUC_2018_JOGO_1: {
Data: "11/08/2018",
Hora: "12:30",
Oponente: "Unirio",
Placar: "D, 30-60",
Torneio: "TUC",
},
TUC_2018_JOGO_2: {
Data: "15/09/2019",
Hora: "17:10",
Oponente: "UFRJ Aecs",
Placar: "V, 29-25",
Torneio: "TUC",
},
TUC_2018_JOGO_3: {
Data: "20/10/2018",
Hora: "16:00",
Oponente: "UERJ Economia",
Placar: "V, 49-30",
Torneio: "TUC",
}
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.