We Keep Coding

Why my table filter is removing the table headers?

I'm trying to implement this table filter which i found at this tutorial but for some reason my filter is removing my table headers and in the examples it doesn't remove the headers, I wonder what I'm doing wrong here?
This is my table:
<input type="text" id="inputFilter" placeholder="Procurar agendamentos..">
<table class="table table-hover table-dark" id="tableAgendamentos">
<thead>
<tr>
<th scope="col">Data</th>
<th scope="col">Animal</th>
<th scope="col">Procedimento</th>
<th scope="col">Status</th>
<th scope="col">Valor</th>
<th scope="col">Nota Fiscal</th>
</tr>
</thead>
<tbody>
#foreach (Agendamento agendamento in Model.ListaAgendamentos)
{
<tr>
<th scope="row">#agendamento.DataHoraInicio</th>
<td>#agendamento.nomeAnimal</td>
<td>#agendamento.NomeServico</td>
#if(agendamento.prioridadeAgendamento == 3)
{
<td class="text-success">Em até 7 dias</td>
}else if(agendamento.prioridadeAgendamento == 2)
{
<td class="text-primary">Em até 30 dias</td>
}else
{
<td class="text-danger">Atrasado/Vencido</td>
}
<td>R$100,00</td>
<td>Baixar</td>
</tr>
}
</tbody>
</table>
This is my script:
<script>
$(document).ready(function(){
$("#inputFilter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#tableAgendamentos tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
This is how my table looks without searching anything
This is how my table looks after searching for some data
Thanks in advance.

Looks like the header is getting filtered out.
I think you could give it a try with an id for tbody instead of the whole table id in the script.
Looking at the tutorial, there seems to be a point at the end stating
Note that we start the search in tbody, to prevent filtering the table headers.

I think error is about this
$("#tableAgendamentos tr")
I think give a class name to tr instead of above code then try again

How can i auto filter on javascript laravel?

I don't want to redirect page when I want to filter the table so how can I make it in javascript?
this is my javascript
javascript
document.getElementById('inputdismissal').value = programId
$('#modalAddDismissal').modal("show",function(){
$('#inputdismissal').val(programId).trigger('change');
$('#inputdismissal').change(function(){
//fire your ajax call
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
})
})
and i have this modal,
modal.php
<div class="modal-header">
<input class="form-control" id="inputdismissal" type="text" readonly/>
</div>
<div class="modal-body">
<table id="tblDisNikName" class="table table-sm table-responsive table-hover table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">Select</th>
<th scope="col">NIK</th>
<th scope="col">Nama</th>
<th scope="col">Position</th>
<th scope="col">Program</th>
</tr>
</thead>
<tbody id="myTable" class="cursor-pointer">
#foreach($dismissalcrew as $datadis)
<tr>
<td><input class="dismissalTest" type="checkbox"></td>
<td>{{$datadis->employee_nik}}</td>
<td>{{$datadis->employee_nama}}</td>
<td>{{$datadis->crewprogramposition_name}}</td>
<td>{{$datadis->show_name}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
I already get my value into inputDismissal and show up on my modal. but the table didn't get filtered at all, how can I just show filtered table when I call the modal using inputDismisal, I mean getting filtered automatically as I call the modal

SO its basically very simple, i just use jquery and put the value
function filterInput(programId){
$(document).ready(function(){
var value = programId.toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
$('#modalAddDismissal').modal("show")
}
just put the modal after the filter and it's work

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>

How to remove td in table

How can I remove a td cell in a table with MVC4?
Could I use JQuery or JavaScript? And if so, how?
<table class="table table-striped table-bordered table-hover" id="tblParticipantList">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Redeem Code</th>
</tr>
</thead>
<tbody>
<tr data-id="columnId" id="customerPartial_94">
<td data-field="NAME">Attn Donna</td>
<td data-field="ADDRESS">3046 Lavon Drive Newyork America 7504</td>
<td data-field="SECURITY_REDEMPTION_CD"></td>
</tr>
<tr data-id="columnId" id="customerPartial_95">
<td data-field="NAME">F 1 La 1</td>
<td data-field="ADDRESS">Asd 1 s 1 Ci 1 s</td>
<td data-field="SECURITY_REDEMPTION_CD"></td>
</tr>
</tbody>
</table>

To remove TD item, you should know exactly td what you want to remove.
Remove All TD item
$('#tblParticipantList > tr > td').remove();
Remove TD at specified Row
$('#tblParticipantList > tr').eq(rowNum).children('td').remove();
Remove TD at specified Row and Column
$('#tblParticipantList > tr').eq(rowNum).children('td').eq(colNum).remove();

Remove child td of the position you want using eq(). Use proper id and class in the selector for expected result.
$('.table-striped tr').each(function(){
$(this).children('td').eq(3).remove();
});

Better way for selecting table row?

I have a following (simplified) table structure:
<table class="form-table">
<tbody>
<tr>
<tr><--Need to select and add class on this guy based on h3 class "check"-->
<th scope="row">
<h3 class="check">Default Checbox:</h3>
</th>
<td>
</tr>
</tbody>
</table>
So i want to select "table row" above the h3 class "check". Table is generated dynamically so i can't just use :eq() ,:gt() or :lt().
To select this guy i am using this code:
$('tbody tr').find('h3.check').parent().addClass('cool');
$('.cool').parent().addClass('until');
But the problem is that i am giving an unnecessary class "cool" in order to make a selection.
<table class="form-table">
<tbody>
<tr>
<tr>
<tr class="until"><--Class successfully added but..-->
<th class="cool" scope="row"><--An extra Class in order to select "table row"-->
<h3 class="check">Default Checbox:</h3>
</th>
<td>
</tr>
</tbody>
</table>
Is there a better way for doing this (without adding unnecessary Class) ?

You can use .has()
$('tbody tr').has('h3.check').addClass('cool');
or :has
$('tbody tr:(h3.check)').addClass('cool');