Develop Reference

How can I use JavaScript to delete a row in an HTML table and its associated data when a button is clicked?

How can I use JavaScript to delete a row in an HTML table and its associated data when a button is clicked? What is the most efficient way to identify the row to be deleted, and what method should I use to remove the row from the DOM? Additionally, how can I ensure that the deletion of the row does not affect the styling or functionality of the remaining rows in the table?
When I click on the button: Remover, the line is hidden. When I click the Adicionar button again, the line that was hidden is added. I want the line along with the data to be definitively deleted when I click on the button: Remover.
I've tried using several methods and I can't solve it, can anyone help?
const form = document.getElementById("agenda-de-contatos");
let linhas = "";
form.addEventListener("submit", function (e) {
e.preventDefault();
const inputNomeContato = document.getElementById("nome-do-contato");
const inputNumeroTelefone = document.getElementById("numero-de-telefone");
let linha = "<tr>";
linha += `<td>${inputNomeContato.value}</td>`;
linha += `<td>${inputNumeroTelefone.value}</td>`;
linha += `<td><button class='excluir' onclick="deleteRow(this.parentNode.parentNode.rowIndex)">Remover</button></td>`;
linha += "</tr>";
linhas += linha;
const corpoTabela = document.querySelector("tbody");
corpoTabela.innerHTML = linhas;
});
function deleteRow(id) {
document.getElementById("tabela").deleteRow(id);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body {
background-color: #e7e7e7;
padding-top: 100px;
}
header {
display: flex;
align-items: center;
margin-bottom: 40px;
}
header img {
height: 36px;
margin-right: 16px;
}
header h1 {
font-size: 40px;
font-weight: bold;
}
.container {
max-width: 960px;
width: 100%;
margin: 0 auto;
}
form {
display: flex;
max-width: 640px;
width: 100%;
justify-content: space-around;
margin-bottom: 56px;
}
form input {
font-size: 16px;
background-color: #fff;
border: none;
border-bottom: 2px solid #000;
padding: 16px;
margin: 0 auto;
}
form button {
background-color: #297fc3;
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
cursor: pointer;
padding: 16px;
margin: 0 auto;
}
table {
width: 100%;
}
table th {
border-bottom: 2px solid #000;
padding: 16px;
font-size: 24;
font-weight: bold;
}
table td {
padding: 16px 0;
text-align: center;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
table td img {
height: 30px;
}
button:hover {
background-color: #258ddd;
}
input:focus,
textarea:focus {
outline-color: #297fc3;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<div class="container">
<header>
<img src="./images/contatos.png" alt="agenda de contatos" />
<h1>Agenda de contatos</h1>
</header>
<form id="agenda-de-contatos">
<input type="" id="nome-do-contato" required placeholder="Nome do contato" />
<input
type="tel"
id="numero-de-telefone"
pattern="(\(?[0-9]{2}\)?)([0-9]{4,5})-?([0-9]{4})"
required
placeholder="Telefone (xx) xxxx-xxxx"
title="Número de telefone precisa ser no formato (xx) xxxx-xxxx"
required="required"
/>
<button type="submit">Adicionar</button>
</form>
<table id="tabela" cellspacing="0">
<thead>
<tr>
<th>Nome do contato</th>
<th>Número de telefone</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

The issues is you are storing the all the generated html in linhas which is a string and when deleting you never removed the from this variable. I have converted this to array so that we can delete the row.
const form = document.getElementById('agenda-de-contatos');
let linhas = [];
form.addEventListener('submit', function (e) {
e.preventDefault();
const inputNomeContato = document.getElementById('nome-do-contato');
const inputNumeroTelefone = document.getElementById('numero-de-telefone');
let linha = '<tr>';
linha += `<td>${inputNomeContato.value}</td>`;
linha += `<td>${inputNumeroTelefone.value}</td>`;
linha += `<td><button class='excluir' onclick="deleteRow(this.parentNode.parentNode.rowIndex,this)">Remover</button></td>`;
linha += '</tr>';
linhas.push(linha);
const corpoTabela = document.querySelector('tbody');
corpoTabela.innerHTML = linhas.join()
})
function deleteRow(id,node) {
linhas.splice(id-1,1);
document.getElementById('tabela').deleteRow(id);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body {
background-color: #e7e7e7;
padding-top: 100px;
}
header {
display: flex;
align-items: center;
margin-bottom: 40px;
}
header img {
height: 36px;
margin-right: 16px;
}
header h1 {
font-size: 40px;
font-weight: bold;
}
.container {
max-width: 960px;
width: 100%;
margin: 0 auto;
}
form {
display: flex;
max-width: 640px;
width: 100%;
justify-content: space-around;
margin-bottom: 56px;
}
form input {
font-size: 16px;
background-color: #fff;
border: none;
border-bottom: 2px solid #000;
padding: 16px;
margin: 0 auto;
}
form button {
background-color: #297fc3;
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
cursor: pointer;
padding: 16px;
margin: 0 auto;
}
table {
width: 100%;
}
table th {
border-bottom: 2px solid #000;
padding: 16px;
font-size: 24;
font-weight: bold;
}
table td {
padding: 16px 0;
text-align: center;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
table td img {
height: 30px;
}
button:hover {
background-color: #258ddd;
}
input:focus,
textarea:focus {
outline-color: #297fc3;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agenda de contatos</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<img src="./images/contatos.png" alt="agenda de contatos">
<h1>Agenda de contatos</h1>
</header>
<form id="agenda-de-contatos">
<input type="" id="nome-do-contato" required placeholder="Nome do contato">
<input type="tel" id="numero-de-telefone" pattern="(\(?[0-9]{2}\)?)([0-9]{4,5})-?([0-9]{4})" required
placeholder="Telefone (xx) xxxx-xxxx" title="Número de telefone precisa ser no formato (xx) xxxx-xxxx"
required="required"></br>
<button type="submit">Adicionar</button>
</form>
<table id="tabela" cellspacing="0">
<thead>
<tr>
<th>
Nome do contato
</th>
<th>Número de telefone</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script src="./main.js"></script>
</body>

Added Demo
https://jsfiddle.net/ssuryar/rhc1uz3g/1/
On button click Remover, the entire table row is getting deleted. The bottom line is a css border bottom property which will be removed along with the table row.
table td {
padding: 16px 0;
text-align: center;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

How to use Get-EventLog, Convert-ToHTML and add a javascript search box to filter entries?

Edit: added a screenshot for Santiago of the HTML event viewer
To describe what I am trying to do. Note: in the meantime, I use ctrl f which is still way quicker than the Windows event viewer on a slow server.
I want to use PowerShell's Get-EventLog (done)
Convert the system event log into a nicely formatted HTML File (done)
Enable the ability to search the HTML generated EventLog data with a JavaScript
search box that will essentially filter the data as you might with
the filter functions in an Excel Spreadsheet (not yet working in
Get-EventLog.ps1)
I have a test script where this works because I set the document.getElementByID, - table = document.getElementById("myTable"); - creating the html table myself and setting the ID. I'm not able to use the same function to grab the ID of the EventLog info to apply the same principle
Artefacts:
The working search function from Convert-toHTML-and-Search-Test.htm
#------------------------------------------------#
# Convert to HTML and Search #
#------------------------------------------------#
# Version 1 #
$TESTCSSbody = #"
<h1>Type in a value from the table below to search</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:auto;">Hostname</th>
<th style="width:auto;">DomainName</th>
<th style="width:auto;">ServerRole</th>
<th style="width:auto;">ServerDescription</th>
<th style="width:auto;">MaintenanceWindow</th>
<th style="width:auto;">PatchingStatus</th>
</tr>
<tr>
<td>Server1</td>
<td>Domain1</td>
<td>Role</td>
<td>Domain Controller</td>
<td>MaintenanceW1</td>
<td>Patched</td>
</tr>
<tr>
<td>Server2</td>
<td>Domain2</td>
<td>Role</td>
<td>Domain Controller</td>
<td>MaintenanceW2</td>
<td>Pending</td>
</tr>
<tr>
<td>Server3</td>
<td>Domain3</td>
<td>Role</td>
<td>Domain Controller</td>
<td>MaintenanceW3</td>
<td>Failed</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, ii;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.querySelectorAll("tbody tr:not(.header)");
for (i = 0; i < tr.length; i++) {
var tds = tr[i].getElementsByTagName("td");
var found = false;
for (ii = 0; ii < tds.length && !found; ii++) {
if (tds[ii].textContent.toUpperCase().indexOf(filter) > -1) {
found = true;
break;
}
}
tr[i].style.display = found?"":"none";
}
}
</script>
<style>
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 20%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable { width: auto; 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: #c4c4c4;
}
h1 { text-align: left; font-size: 20pt; font-family: Calibri; }
h5, th { text-align: left; font-size: 14pt; font-family: Calibri; }
table { width: auto; font-family: Calibri; box-shadow: 5px 5px 5px #888; border: thin ridge grey; }
th { background: black; color: white; max-width: 400px; padding: 5px 10px; }
td { font-size: 11pt; padding: 5px 20px; color: black; }
tr { background: #b8d1f3; }
tr:nth-child(even) { background: white; }
tr:nth-child(odd) { background: #f1f1f1; }
tr:hover {background-color: #ddd;}
</style>
"#
#HTML Report info
$SEARCHTESTREPORT = "C:\htmlreports\ConvertToHTML-and-Search-Test.htm"
$SEARCHTESTREPORTtitle = "TESTING SEARCH FUNCTIONALITY"
ConvertTo-Html -Body $TESTCSSbody -Title $SEARCHTESTREPORTtitle |
#Output the HTML File to $HTMLREPORT
Out-File $SEARCHTESTREPORT
start $SEARCHTESTREPORT
Get-EventLog.ps1
#----------------------------------------------------------------------------#
# This script produces the Windows Event Viewer in HTML #
#----------------------------------------------------------------------------#
#HTML Report info
$HTMLREPORT = "C:\Get-EventLog\eventlogreport.htm"
$HTMLREPORTtitle = "Event Log Report"
#Apply CSS Formatting
$CSSbody = #"
<h1>Event Viewer</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Type in a name">
<script>
function myFunction() {
var input, filter, table, tr, td, i, ii;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.querySelectorAll("tbody tr:not(.header)");
for (i = 0; i < tr.length; i++) {
var tds = tr[i].getElementsByTagName("td");
var found = false;
for (ii = 0; ii < tds.length && !found; ii++) {
if (tds[ii].textContent.toUpperCase().indexOf(filter) > -1) {
found = true;
break;
}
}
tr[i].style.display = found?"":"none";
}
}
</script>
<style>
#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 20%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable { width: auto; 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: #c4c4c4;
}
h1 { text-align: left; font-size: 20pt; font-family: Calibri; }
h5, th { text-align: left; font-size: 11; font-family: Calibri; }
table { width: auto; font-family: Calibri; box-shadow: 5px 5px 5px #888; border: thin ridge grey; }
th { background: #00078A; color: white; max-width: 400px; padding: 5px 10px; }
td { font-size: 11pt; padding: 5px 20px; color: black; }
tr { background: #b8d1f3; }
tr:nth-child(even) { background: white; }
tr:nth-child(odd) { background: #f1f1f1; }
tr:hover {background-color: #ddd;}
</style>
"#
#EntryTypes:
#-EntryType Error, FailureAudit, Information, SuccessAudit, Warning
#Lognames
#-Logname Application, Security, Setup, System
#$Begin = Get-Date -Date 01/01/2021 08:00:00
#$End = Get-Date -Date 04/02/2021 16:00:00
Get-EventLog -LogName System -Newest 100 |
Select -Property EventID,Source,MachineName,EntryType,Message,TimeGenerated,UserName |
ConvertTo-Html -Body $CSSbody -Title $HTMLREPORTtitle |
#Output the HTML File to $HTMLREPORT
Out-File $HTMLREPORT
start $HTMLREPORT

mobile version filter is not showing properly

I made filter based on selection in input. It shows only items with same category on click. On desktop version when I click for example "Others" it will list only tr with Others in category but when I resize on mobile version and press filter, so nothing happen. All tr's are still showing. Really don't have idea what is difference between mobile and desktop version when JS is working with same code in both views.
highlightRows = () => {
let oddRows = document.querySelectorAll('tbody > tr.show')
oddRows.forEach((row, index)=> {
if (index % 2 == 0) {
row.style.background = '#f1f1f1'
} else {
row.style.background = '#fff'
}
})
}
const filterOptions = () => {
const option = document.querySelector("#filter").value;
const selection = option.replace('&', '')
const rows = document.querySelectorAll("#body1 > tr");
console.log(rows.length);
rows.forEach(row => {
let td = row.querySelector("td:last-child");
let filter = td.innerText.replace('&', '');
if (filter === selection) {
row.className = 'show'
} else {
row.className = 'hidden'
}
});
highlightRows()
};
document.getElementById("filter").addEventListener("change", filterOptions);
.table-filters {
display: flex;
align-items: center;
justify-content: center;
margin: 2em;
text-align: center;
}
.table-filters a {
color: #222;
font-size: 16px;
font-weight: 500;
margin-right: 1em;
display: inline-block;
}
.table-filters a:hover {
text-decoration: none;
}
.table-filters select {
background: #fff;
font-size: 16px;
font-weight: 500;
width: 12em;
height: 2.5em;
}
table.stats {
background: #fff;
width: 100%;
table-layout: fixed;
border-radius: 6px;
}
tbody tr.show {
display: table-row;
}
tbody tr.hidden {
display: none;
}
table.vypis {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table.vypis > caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table.vypis > tr.vypis-riadok {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table.vypis th,
table.vypis td {
padding: .625em;
text-align: center;
}
table.vypis th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 800px) {
table.vypis {
border: 0;
}
table.vypis > caption {
font-size: 1.3em;
}
table.vypis > thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table.vypis td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table.vypis td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table.vypis td:last-child {
border-bottom: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-filters">
<select id="filter">
<option disabled selected value="none">Categories</option>
<option>Hobby</option>
<option>Others</option>
</select>
</div>
<table class="vypis">
<caption>Pohyby na účte</caption>
<thead>
<tr>
<th scope="col">Refer</th>
<th scope="col">Date</th>
<th scope="col">Price</th>
<th scope="col">Category</th>
</tr>
</thead>
<tbody id="body1">
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Hobby</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>

Your code works well, but the problem is with rule display: block, which is in the media query. in the table.vypis tr selector. This rule overrides another block hiding rule. You need to remove display: block out of table.vypis tr.
#media screen and (max-width: 800px) {
...
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
...
}
Or a second solution:
Add! !important to rule display: none, selector tbody tr.hidden. It should look like this:
tbody tr.hidden {
display: none!important;
}
I advise you to use the second solution!

Show all on option click

I got this filter where everything works perflectly. When I press specific category it will list only rows with that categories. But I realized that I don't know how to show them all after click on first option. My goal is. On "Categories" click show all rows and on specific category click show only specific category.
highlightRows = () => {
let oddRows = document.querySelectorAll('tbody > tr.show')
oddRows.forEach((row, index)=> {
if (index % 2 == 0) {
row.style.background = '#f1f1f1'
} else {
row.style.background = '#fff'
}
})
}
const filterOptions = () => {
const option = document.querySelector("#filter").value;
const selection = option.replace('&', '')
const rows = document.querySelectorAll("#body1 > tr");
console.log(rows.length);
rows.forEach(row => {
let td = row.querySelector("td:last-child");
let filter = td.innerText.replace('&', '');
if (filter === selection) {
row.className = 'show'
} else {
row.className = 'hidden'
}
});
highlightRows()
};
document.getElementById("filter").addEventListener("change", filterOptions);
.table-filters {
display: flex;
align-items: center;
justify-content: center;
margin: 2em;
text-align: center;
}
.table-filters a {
color: #222;
font-size: 16px;
font-weight: 500;
margin-right: 1em;
display: inline-block;
}
.table-filters a:hover {
text-decoration: none;
}
.table-filters select {
background: #fff;
font-size: 16px;
font-weight: 500;
width: 12em;
height: 2.5em;
}
table.stats {
background: #fff;
width: 100%;
table-layout: fixed;
border-radius: 6px;
}
tbody tr.show {
display: table-row;
}
tbody tr.hidden {
display: none;
}
table.vypis {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table.vypis > caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table.vypis > tr.vypis-riadok {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table.vypis th,
table.vypis td {
padding: .625em;
text-align: center;
}
table.vypis th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 800px) {
table.vypis {
border: 0;
}
table.vypis > caption {
font-size: 1.3em;
}
table.vypis > thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table.vypis td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table.vypis td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table.vypis td:last-child {
border-bottom: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-filters">
<select id="filter">
<option selected value="none">Categories</option>
<option>Hobby</option>
<option>Others</option>
</select>
</div>
<table class="vypis">
<caption>Pohyby na účte</caption>
<thead>
<tr>
<th scope="col">Refer</th>
<th scope="col">Date</th>
<th scope="col">Price</th>
<th scope="col">Category</th>
</tr>
</thead>
<tbody id="body1">
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Hobby</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>

As you are adding hidden class so need to remove this when categories option is clicked so one way is to loop through tr and check if the tr contains that class and then just change it to show .
Demo Code :
highlightRows = () => {
let oddRows = document.querySelectorAll('tbody > tr.show')
oddRows.forEach((row, index) => {
if (index % 2 == 0) {
row.style.background = '#f1f1f1'
} else {
row.style.background = '#fff'
}
})
}
const filterOptions = () => {
const option = document.querySelector("#filter").value;
const selection = option.replace('&', '')
const rows = document.querySelectorAll("#body1 > tr");
//check if value is not none
if (option != "none") {
rows.forEach(row => {
let td = row.querySelector("td:last-child");
let filter = td.innerText.replace('&', '');
if (filter === selection) {
row.className = 'show'
} else {
row.className = 'hidden'
}
});
highlightRows()
} else {
//loop though rows
rows.forEach(row => {
//check if row has class hidden
if (row.classList.contains("hidden")) {
row.className = 'show'//add showclass
}
})
highlightRows()
}
};
document.getElementById("filter").addEventListener("change", filterOptions);
.table-filters {
display: flex;
align-items: center;
justify-content: center;
margin: 2em;
text-align: center;
}
.table-filters a {
color: #222;
font-size: 16px;
font-weight: 500;
margin-right: 1em;
display: inline-block;
}
.table-filters a:hover {
text-decoration: none;
}
.table-filters select {
background: #fff;
font-size: 16px;
font-weight: 500;
width: 12em;
height: 2.5em;
}
table.stats {
background: #fff;
width: 100%;
table-layout: fixed;
border-radius: 6px;
}
tbody tr.show {
display: table-row;
}
tbody tr.hidden {
display: none;
}
table.vypis {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table.vypis>caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table.vypis>tr.vypis-riadok {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table.vypis th,
table.vypis td {
padding: .625em;
text-align: center;
}
table.vypis th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-filters">
<select id="filter">
<option selected value="none">Categories</option>
<option>Hobby</option>
<option>Others</option>
</select>
</div>
<table class="vypis">
<caption>Pohyby na účte</caption>
<thead>
<tr>
<th scope="col">Refer</th>
<th scope="col">Date</th>
<th scope="col">Price</th>
<th scope="col">Category</th>
</tr>
</thead>
<tbody id="body1">
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Hobby</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>
</tbody>
</table>

JS filter to allow numbers with AND without dashes

I need to filter a table that filters live while typing. It will use phone numbers, but needs to have the ability to accept numbers with and without dashes. 905-000-7777 and 9050007777 should both be acceptable when searching for that number.
This is what I have so far, I've been trying for hours:
<!DOCTYPE html>
<html>
<head>
<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>
<h2>Number search</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Number</th>
</tr>
<tr>
<td>905-000-7777</td>
</tr>
<tr>
<td>905-282-9992</td>
</tr>
<tr>
<td>9050107777</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
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")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
Currently I can have it filter the numbers but in the phone number, you must match the table variable perfectly. I'd like it to accept this OR that. I don't have much experience with js and this is proving to be more difficult then I thought.

As others have already explained in the comments, you can remove - hyphens from both input and cell contents before comparing. See the working fiddle below:
cleanedFilter = filter.replace("-","");
cellContent = td.innerHTML.toUpperCase().replace("-","");
function myFunction() {
var input, filter, table, tr, td, i, cleanedFilter;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
cleanedFilter = filter.replace("-","");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
cellContent = td.innerHTML.toUpperCase().replace("-","");
if (cellContent.indexOf(cleanedFilter) > -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;
}
<h2>Number search</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Number</th>
</tr>
<tr>
<td>905-000-7777</td>
</tr>
<tr>
<td>905-282-9992</td>
</tr>
<tr>
<td>9050107777</td>
</tr>
</table>

You can use regex, which will be something like that:
/^(\d+-?)+\d+$/