We Keep Coding

How to configure the hidden class in the rows of a table?

I have a table that I'm manipulating through a static js file. I made a filter to show only the lines that contain the values ​​typed in the input. For that, I add the 'hidden' class to those that don't contain the value typed in the input. However, when I go to inspect, only the first line is configured with the "hidden" class. How do I do it for all the other lines that don't contain the values ​​typed in the input?
The code:
HTML:
<div class="container">
<hr>
<form class="form-search">
<input class="form-control" id="form-control" type="text" name="fitrar" placeholder="Buscar Registros"
autocomplete="off" autofocus />
Limpar
</form>
</hr>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">CNPJ</th>
<th scope="col">CPF</th>
<th scope="col">Nome</th>
</tr>
</thead>
<tbody>
{% for registro in registros %}
<tr>
<td scope="row">{{ registro.id }}</td>
<td scope="row">{{ registro.cnpj }}</td>
<td scope="row">{{ registro.cpf }}</td>
<td scope="row">{{ registro.nome }}</td>
</tr>
JS:
const inputSearchRegistros = document.querySelector('.form-search input')
const tableRegistros = document.querySelector('.table tbody tr')
inputSearchRegistros.addEventListener('input', event => {
const inputValue = event.target.value.trim()
Array.from(tableRegistros.children)
.filter(regs => !regs.textContent.includes(inputValue))
.forEach(regs => {
regs.classList.add('hidden')
})
})
Result:
<tr>
<td scope="row" class="hidden">1</td>
<td scope="row" class="hidden">31024483000198</td>
<td scope="row" class="hidden">86520083534</td>
<td scope="row" class="hidden">Adriana teste esteves</td>
</tr>
<tr>
<td scope="row">2</td>
<td scope="row">31024483000198</td>
<td scope="row">86520083534</td>
<td scope="row">Adriana teste esteves</td>
</tr>
They are the same values, but only the first line receives the hidden class
I would like all lines that do not have the values ​​typed in the input to receive the hidden class.

querySelector only returns the first element that matches the selector even if there is more than one match. You want to use querySelectorAll like this
const tableRegistros = document.querySelectorAll('.table tbody tr')
You'll then have to loop through the results like in ryan's answer or select the td elements and loop through those like this depending on what your trying to accomplish
const tableRegistros = document.querySelectorAll('.table tbody tr td')
inputSearchRegistros.addEventListener('input', event => {
const inputValue = event.target.value.trim()
Array.from(tableRegistros)
.filter(regs => !regs.textContent.includes(inputValue))
.forEach(regs => {
regs.classList.add('hidden')
})
})

Two problems:
You are using document.querySelector, which will only select the first row. You want to use document.querySelectorAll
You are iterating over the table cells using Array.from(tableRegistros.children).
// this only selects the first row
const tableRegistros = document.querySelector('.table tbody tr');
// this is a bunch of td elements
Array.from(tableRegistros.children)
Instead, you want to iterate over all of the rows, and then all of the cells in each row:
// use querySelectorAll to select all rows
const tableRegistros = document.querySelectorAll('.table tbody tr');
// Iterate each row
tableRegistros.forEach(row => {
// Then search all of the cells for the content
const containsText = Array.from(row.children).some(cell => cell.textContent.includes(inputValue));
if (!containsText) {
row.classList.add('hidden');
} else {
row.classList.remove('hidden');
}
});

How to get all the elements of a column from html table and validate if a particular string exists in that list

I have a html table with multiple rows and columns. I want to pull all the values by column id and compare with some matching string. If matches i want to enable a button on the page.
Could you please let me know how to refer the column by id in $(document).ready function.
Here is the table
<table id="data" class="table">
<thead>
<tr class="DataT1">
<th>Id</th>
<th>Name</th>
<th>Place</th>
</tr>
</thead>
<th:block th:each="it : ${data}">
<tr>
<td th:text="${it.id}">id</td>
<td th:text="${it.name}">name</td>
<td th:text="${it.place}">place</td>
</tr>
</th:block>
</table>
Button:
style="visibility:hidden">Submit
$(document).ready(function(){
//here i want to pull the place column and verify if one of the
places matches my input string enable submit button
$("#submitbutton").css("visibility", "visible");
}
}

This function will take all information inside you td and search for the string you looking for :
But i cannot get the point that you search for a particular string instead of searching for an object.
const addresses = [...document.querySelectorAll(".address")];
const serchFromList = (arr, str) => {
return arr.map(el =>
el = el.innerHTML
).filter(el => el === str)
}
console.log(serchFromList(addresses, "NY"))
/* in case you want a boolean you can use some*/
const isAddressExist = (arr, str) => {
return arr.map(el =>
el = el.innerHTML
).some(el => el === str)
}
console.log(isAddressExist(addresses, "NY"))
<table id="data" class="table">
<thead>
<tr class="DataT1">
<th>Id</th>
<th>Name</th>
<th>Place</th>
</tr>
</thead>
<th>
<tr>
<td>4545</td>
<td>5454</td>
<td>65687</td>
</tr>
<tr>
<td>aziz</td>
<td>david</td>
<td>paul</td>
</tr>
<tr>
<td class='address'>NY</td>
<td class='address'>MTL</td>
<td class='address'>BC</td>
</tr>
</th>
</table>

Should be pretty doable with XPath if you don't want to add extra attributes to Place cell. Just find out the position of Place column and get the text from the same position of <td>.
// Get the table node first
let node = document.getElementById('data')
// Find out position of `Place` column
let nth = document.evaluate('count(//th[text()="Place"]/preceding-sibling::*)+1', node).numberValue
// Get all the place cell by the position
let placeCells = document.evaluate(`//td[position()=${nth}]`, node)
// Get all the place names
let places = [],
placeNode = placeCells.iterateNext()
while (placeNode) {
places.push(placeNode.textContent)
placeNode = placeCells.iterateNext()
}
console.log(places)
// ['NYC', 'SF', 'LA']
<table id="data" class="table">
<thead>
<tr class="DataT1">
<th>Id</th>
<th>Name</th>
<th>Place</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>Mary</td>
<td>NYC</td>
</tr>
<tr>
<td>0002</td>
<td>John</td>
<td>SF</td>
</tr>
<tr>
<td>0003</td>
<td>Bob</td>
<td>LA</td>
</tr>
</tbody>
</table>

Retrieving column values from a table by clicking row with jquery and html

I'm using html5 and jquery to set up a dynamic table, until then I can add the elements to the table without problems, but I can not retrieve the value of its columns. so I have the following questions:
How can I recover the table data by clicking the ROW?
Should I always use the data-name, id for example as in the first
line ?
$(document).on("change", "#TabClientesAdicionados", function(e) {
alert('?');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>

How can I recover the table data by clicking the ROW?
You can bind the click event to your TR elements and get the information.
Should I always use the data-name, id for example as in the first line?
Yes, because you don't want the parsed HTML to manipulate data. The data attributes are a better approach to keep related data (no HTML) to DOM elements.
Look at this code snippet
This approach binds the click event to TR elements
$('#TabClientesAdicionados tbody tr').click(function() {
var data = { name: '', id: '' };
$(this).children('td').each(function() {
var name = $(this).data('nome');
if (name) {
data.name = name;
}
var id = $(this).data('id');
if (id) {
data.id = id;
}
});
console.log(data);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno_1">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>

I would do as the following snippet.
You need to bind the event to the row tr ant then get each of its children.
By adding a data attribute you could set a column name. This could also help if you eventually needed to extract the value of an specific cell.
Incidentally you could also add a second data attribute named like data-value or something similar- This in case you are worried that your parsed html content might cause you trouble with the values.
$(document).ready(function() {
$("#mytable").on('click', 'tr', onCellClick);
//Bind the event to the table row
function onCellClick() {
let row = $(this); //get the jquery Object for the row
let rowValues = {}; //An empty object to hold your data
let temp;
//extract the value of every cell in the row
//Doing it this way gives you flexibility on the amount of colums you have
row.find('td').each(function(item) {
temp = $(this);
rowValues[temp.data('column')] = temp.text();
//this could be changed to
//rowValues[temp.data('column')] = temp.data('value);
//if you desire to use a separate data-value property
});
console.log(rowValues);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%" id="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td data-column="name" data-value="Jill">Jill</td> <!-Adding value property-->
<td data-column="lastname">Smith</td>
<td data-column="age">50</td>
</tr>
<tr>
<td data-column="name">Eve</td>
<td data-column="lastname">Jackson</td>
<td data-column="age">94</td>
</tr>
</table>

Get the row index of bootstrap table in click without using jquery

I have a bootstrap table in my react project. I want to get the index of row which I click on. I want to do something like this onclick = {this.handleClick} and in handleClick function I want to get the index of row. Is it possible to do it. Most of the solutions available shows everything using jquery and I don't want to use Jquery. I want to do it using just javascript only. This is my table
<Table className='flags-table' responsive hover>
<thead>
<tr>
<th> </th>
<th> Time In </th>
<th> Time Out </th>
<th> Type </th>
<th> Category </th>
</tr>
</thead>
<tbody>
{
FLAGS_LIST.map((x,i)=> (
<tr key={i}>
<td> <div className='red-box'></div> </td>
<td> {x.time_in} </td>
<td> {x.time_out} </td>
<td> {x.type} </td>
<td> {x.category} </td>
</tr>
))
}
</tbody>
</Table>

You can use code like this:
onclick = {this.handleClick.bind(this, i)};
and handleClick should declare like this:
var handleClick = function(i) {
console.log("key of row", i)
...
};

Using JavaScript to move node

I have a table structured as below. As I cannot change anything about how the HTML is created but I can add some lines I want to solve this via JavaScript.
What I want is that:
(1) the table gets an additional <thead> element
(2) the <tr> element with class firstline becomes a child of <thead>
<table>
<tbody>
<tr class= firstline >
<th> 1st column </th>
<th> 2nd column </th>
</tr>
<tr class= content >
<th> foo </th>
<th> bat </th>
</tr>
</tbody>
</table>
So far, I manage to delete the <tr class= firstline > element and I manage to add a <thead> element to the table. But I have no clue how to insert the <tr class= firstline > into the <thead> ???
var firstLines = document.getElementsByClassName("firstline");
for (var i=0; i<firstLines.length; i++) {
var FLparent = firstLines[i].parentNode.parentNode;
var tbody = document.createElement("thead") ;
FLparent.insertBefore(tbody, FLparent.firstChild);
FLparent.firstChild.appendChild(firstLines[i]);
firstLines[i].parentNode.removeChild(firstLines[i]);
}

It could be as simple as:
var
table = document.querySelector('table'),
tHead = table.insertBefore(document.createElement('thead'), table.firstChild);
tHead.appendChild(
table.querySelector('tr.firstline')
);
http://jsbin.com/ruza/3/