We Keep Coding

Javascript table filter doesn't show table headers

Im using a script to filter a table based on a select value. The script works, the only problem is that it filter also the headers of the table, which Id like to show always.
This is the javascript and the table:
$(document).ready(function($) {
$('#mac').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return $(item).find('td:last-child').text().split(';').indexOf(selection) === -1;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" id="mac">
<table id="table_id" class="display">
<thead>
<tr>
<th>Tipo</th>
<th>Descrizione</th>
<th>Scadenza</th>
<th>Società</th>
<th>Macrotema</th>
</tr>
</thead>
<tbody>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Corsi di aggiornamento </td>
<td>
<nobr>2025/01/01</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Rinnovo iscrizione</td>
<td>
<nobr>2024/12/31</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
</tbody>
</table>
My question is: How can I edit the script to show the headers?
Thank you for your time :D
let me know if I have to explain the situation better.

you can add a more specific selector :
var dataset = $('table tbody tr');

Please find the below solution with output.
$(document).ready(function($) {
$('#mac').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return index !== 0 && $(item).find('td:last-child').text().split(';').map(x => x.trim()).indexOf(selection) === -1;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input id="mac">
<table id="table_id" class="display">
<thead>
<tr>
<th>Tipo</th>
<th>Descrizione</th>
<th>Scadenza</th>
<th>Società</th>
<th>Macrotema</th>
</tr>
</thead>
<tbody>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Corsi di aggiornamento </td>
<td>
<nobr>2025/01/01</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Rinnovo iscrizione</td>
<td>
<nobr>2024/12/31</nobr>
</td>
<td>XXXX</td>
<td>SEDA; </td>
</tr>
<tr style=" background-color:">
</tbody>
</table>

Edit/Print <input> field via Console

Here is what I have. Nothing has IDs, Names or Classes.
Is there anyway to enter a vaue in the input field under City using the Chrome Console and js? Alternatively is there a way I can print the value of said field also using js in the Chrome Console?
I assume it requires using the div City and traversing to next input.
Thanks ahead of time!
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>Address</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>City</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>Zipcode</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>

document.getElementsByTagName("table")[3].getElementsByTagName("input")[0].value="your value"

The boilerplate code
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
try {
var field = document.getElementsByTagName("table")[i].getElementsByTagName("div")[0].textContent;
if (field == "City") {
document.getElementsByTagName("table")[i + 1].getElementsByTagName("input")[0].value = "your values"
}
} catch (err) {}
}

Parsing HTML with Javascript / jQuery or PHP

<table>
<tbody>
<tr>
<td>
<span class="big">Fruits</span>
</td>
</tr>
<tr>
<td>
<span class="small">Apple</span>
</td>
</tr>
<tr>
<td>
<span class="small">Apricot</span>
</td>
</tr>
<tr>
<td>
<span class="small">Carrot</span>
</td>
</tr>
<tr>
<td>
<span class="big">Colors</span>
</td>
<tr>
<td>
<span class="small">Red</span>
</td>
</tr>
<tr>
<td>
<span class="small">Blue</span>
</td>
</tr>
</tbody>
</table>
I have more than 10k tables like this, and need to parse them like
Fruits: Apple Apricot Carrot
Colors: Red Blue
Categories have different class names and objects have different class names, but they are all in the same table.

Here's my implementation:
var items = {};
var lastItem = null;
$('.big, .small').each(function() {
var content = $(this).text();
var cls = $(this).attr('class');
if ( cls == 'big' )
{
lastItem = content;
items[lastItem] = [];
return;
}
items[lastItem].push(content);
});
console.log(items);
var items = {};
var lastItem = null;
$('.big, .small').each(function() {
var content = $(this).text();
var cls = $(this).attr('class');
if ( cls == 'big' )
{
lastItem = content;
items[lastItem] = [];
return;
}
items[lastItem].push(content);
});
console.log(items);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<span class="big">Fruits</span>
</td>
</tr>
<tr>
<td>
<span class="small">Apple</span>
</td>
</tr>
<tr>
<td>
<span class="small">Apricot</span>
</td>
</tr>
<tr>
<td>
<span class="small">Carrot</span>
</td>
</tr>
<tr>
<td>
<span class="big">Colors</span>
</td>
<tr>
<td>
<span class="small">Red</span>
</td>
</tr>
<tr>
<td>
<span class="small">Blue</span>
</td>
</tr>
</tbody>
</table>

jquery auto print the row number

i've a table with 10 row, is it possible to print the row number (from 1 to 9, the first row is NO&title, the second row should be 1) to the td with class "sno" based on the size of the table? here is the html:
<table width="100%" border="1">
<tr>
<td width="23%">No.</td>
<td width="77%">Title</td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
the result should be
<table width="100%" border="1">
<tr>
<td width="23%">No.</td>
<td width="77%">Title</td>
</tr>
<tr>
<td class="sno">1</td>
<td> </td>
</tr>
<tr>
<td class="sno">2</td>
<td> </td>
</tr>
<tr>
<td class="sno">3</td>
<td> </td>
</tr>
<tr>
<td class="sno">4</td>
<td> </td>
</tr>
<tr>
<td class="sno">5</td>
<td> </td>
</tr>
<tr>
<td class="sno">6</td>
<td> </td>
</tr>
<tr>
<td class="sno">7</td>
<td> </td>
</tr>
<tr>
<td class="sno">8</td>
<td> </td>
</tr>
<tr>
<td class="sno">9</td>
<td> </td>
</tr>
The question is not generate the table, it is print the right number to target

Try with the simpleone
$('table tbody tr').not(":first").each(function(idx){
$(this).children(":eq(0)").html(idx + 1);
});

Here is the jsfiddle example: http://jsfiddle.net/3BBEN/
$(document).ready(function(){
//use a special class name or id for the table
//using find I'm getting all tr elements in the table
//using not(':eq(0)') I'm ignoring the first tr element
//using each I'm iterating through the selected elements
$('table').find('tr').not(':eq(0)').each(function(i){
//using children('td:eq(0)') I'm getting the first td element inside the tr
$(this).children('td:eq(0)').addClass('sno').text(i+1);
});
});

Table row elements have a rowIndex property that is the zero–based sequence number for the table
section that they are in. So if you have a reference to a cell you can use:
var rowIndex = cell.parentNode.rowIndex;
If you have header rows in a table, you probably should put them in a thead table section, then
you can number the rows in tbody section easily, e.g.
<table>
<thead>
<tr>
<td>head<td>head
</tr>
</thead>
<tbody>
<tr>
<td class="sno"></td>
<td>...</td>
</tr>
<tr>
<td class="sno"></td>
<td>...</td>
</tr>
</tbody>
</table>
So now you can do something like:
window.onload = function() {
var table = document.getElementsByTagName('table')[0];
var rows = table.tBodies[0].rows;
for (var i=0, iLen=rows.length; i<iLen; i++) {
rows[i].cells[0].innerHTML = i + 1;
}
};
Of course you can get the rows some other way (e.g. class), but the above is independent of that.

Try this:
$(document).ready(function(){
$cells=$("table td.sno");
for(var i=0;i<$cells.length;i++)
{
// alert(i);
$cells.eq(i).text(i);
}
});
Check on fiddle http://jsfiddle.net/qcWec/1/

try this::
$(document).ready(function(){
var i=1;
$('.sno').each(function(){
$(this).text(i);
i++;
});
});

Manipulating rows and columns in HTML table with multi-row cells

I have an html table with cells that span multiple rows:
<table border="1" style=""><tbody id="x">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3">**</td>
<td>AAAA</td>
<td> </td>
</tr>
<tr id="row2">
<td>BBBB</td>
<td> </td>
</tr>
<tr>
<td>CCCC</td>
<td> </td>
</tr>
<tr>
<td style=""> </td>
<td id="ee">EEEE</td>
<td> </td>
</tr>
<tr>
<td style=""> </td>
<td id="dd">DDDD</td>
<td> </td>
</tr>
</tbody></table>
<script type="text/javascript">
alert ("index of dd before delete =" + document.getElementById("dd").cellIndex);
document.getElementById("row2").style.display="none";
alert ("index of dd after delete =" + document.getElementById("dd").cellIndex);
</script>
I am trying to manipulate it in Javascript, eg hide row2.
When I do that, the multi-row cell containing "**" moves down, shifting all the cells in row 3 by 1 to the right. Evidently I have to reduce its rowSpan.
But it seems when I am looking at row 1, I have no way of knowing that there is a multi-row cell intersecting this row - it seems I have to scan all the rows above row2 for multi-row cells.
Is there a better/quicker way to find out what multi-row cells affect the hiding (or deleting) operation?

Try this using javascript... It is working properly.
Change the value of currRowToDelete for Range [1 to 6].
Refer for working code: http://jsfiddle.net/arunkumrsingh/cdS2D/1/
<table id="tbl" border="1" runat="server" >
<tr id="row1">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td rowspan="3">**</td>
<td>AAAA</td>
<td> </td>
</tr>
<tr id="row3">
<td>BBBB</td>
<td> </td>
</tr>
<tr id="row4">
<td>CCCC</td>
<td> </td>
</tr>
<tr id="row5">
<td style=""> </td>
<td id="ee">EEEE</td>
<td> </td>
</tr>
<tr id="row6">
<td style=""> </td>
<td id="dd">DDDD</td>
<td> </td>
</tr>
</table>
<script type="text/javascript">
var trs = document.getElementById("tbl").getElementsByTagName("tr");
var tds;
var bDeleted = false;
var currRowToDelete = 3;
for(var i=0;i<currRowToDelete;i++)
{
tds = trs[i].getElementsByTagName('td');
for(var j=0;j<tds.length;j++)
{
var currRowSpan = tds[j].rowSpan;
if(currRowSpan > 1)
{
if(eval(i + 1) == currRowToDelete)
{
var cell = document.createElement("td");
cell.innerHTML = tds[j].innerHTML;
trs[i + 1].insertBefore(cell, trs[i + 1].getElementsByTagName('td')[0]);
document.getElementById("tbl").deleteRow(i);
bDeleted = true;
document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);
}
else
{
if(eval(currRowSpan + i) >= currRowToDelete)
document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);
}
}
}
}
if(bDeleted == false)
document.getElementById("tbl").deleteRow(currRowToDelete -1);
</script>

I have a solution, in which you don't have to calculate the Rowspan and Colspan.
Step 1: Get the content of HTML (As mentioned above) and save as EXCEL file.
Step 2: Delete the particular Row (ie Row 2).
Step 3: Save as HTML file and Read the HTML content.
You will get the HTML in correct format.