Develop Reference

How to hide the table according filter number in the content?

I have problem to hide the table is follow the Category/Cabinet number are range 100-199 and range 400-499.
Below is my example coding to describe, these example have 3 table, how to detect if range 100-199 and range 400-499 in the Category/Cabinet then hide the table:
<table id="noshow">
<tr>
<th>Test 1</th>
<th>Test 2</th>
</tr>
<tr>
<td>Title</td>
<td>ABC</td>
</tr>
<tr>
<td>Reference No.</td>
<td>123456</td>
</tr>
<tr>
<td>Date</td>
<td>28-05-2020</td>
</tr>
<tr>
<td>Category/Cabinet</td>
<td>187-1-PENTADBIRAN</td>
</tr>
<tr>
<td>Subcategory/Folder</td>
<td>187-1-1-PENTADBIRAN/PERUNDANGAN</td>
</tr>
</table>
<br><br>
<table id="noshow">
<tr>
<th>Test 3</th>
<th>Test 4</th>
</tr>
<tr>
<td>Title</td>
<td>DEF</td>
</tr>
<tr>
<td>Reference No.</td>
<td>123</td>
</tr>
<tr>
<td>Date</td>
<td>27-05-2020</td>
</tr>
<tr>
<td>Category/Cabinet</td>
<td>356-1-PENTADBIRAN</td>
</tr>
<tr>
<td>Subcategory/Folder</td>
<td>356-1-1-PENTADBIRAN/PERUNDANGAN</td>
</tr>
</table>
<br><br>
<table id="noshow">
<tr>
<th>Test 5</th>
<th>Test 6</th>
</tr>
<tr>
<td>Title</td>
<td>GHI</td>
</tr>
<tr>
<td>Reference No.</td>
<td>8888</td>
</tr>
<tr>
<td>Date</td>
<td>23-05-2020</td>
</tr>
<tr>
<td>Category/Cabinet</td>
<td>466-1-PENTADBIRAN</td>
</tr>
<tr>
<td>Subcategory/Folder</td>
<td>466-1-1-PENTADBIRAN/PERUNDANGAN</td>
</tr>
</table>
I have using below the javascirpt to solve, but can't hide the table:
$(document).ready(function(){
$('#noshow').each(function(k,v){
var number=$(v).text().split('-')[0];
console.log(number,$(v).text());
if((number >= 100 && number <= 199)||(number >= 400 && number <= 499)){
console.log("remove");
$(v).remove();
}
});
});
My output like below the picture:
If success, the result only left not range 100-199 and range 400-499 to show the table like below the picture:
If possible using the javascript function to hide the data?Hope someone can guide me how to hide the table according the Category/Cabinet number are range 100-199 and range 400-499. Thanks.

Try this
$('.noshow tr td').each(function (k, v) {
var title = $(v).text();
if (title === 'Category/Cabinet') {
var number = parseInt($(this).next().text().split('-')[0])
if ((number >= 100 && number <= 199) || (number >= 400 && number <= 499)) {
$(this).closest('.noshow').remove();
}
}
});
Also change noShow to class and not id, as we should not have multiple id with same name in the dom
Here is a working jsfiddle

How to delete specific table rows with javascript?

How can I delete specific table rows by giving up the row number in an input field?
The table I want to target: Complete code is linked below.
<table id="uitvoertabel" border="1">
<tr>
<th></th>
<th>Voornaam</th>
<th>Achternaam</th>
<th>Aantal punten</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Cruijff</td>
<td>54</td>
</tr>
<tr>
<td>2</td>
<td>Frans</td>
<td>Bauer</td>
<td>47</td>
</tr>
<tr>
<td>3</td>
<td>Selah</td>
<td>Sue</td>
<td>93</td>
</tr>
</table>
This is the complete code: https://jsfiddle.net/c6oLf8ye/1/

Pass the row number you want to delete like 0,1,2,3...
document.getElementById("uitvoertabel").deleteRow(0);
updated the same in: https://jsfiddle.net/3v2rdbmt/

How to delete the last column in an HTML TABLE using by jquery?

I have an HTML TABLE:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
<th>Message</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
<td>etc</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
<td>etc</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>etc</td>
</tr>
</tbody>
</table>
<input type="button" onclick="deleteLastColumn();" value="do it"/>
I need a javascript/jquery code, which delete the last column (message) in the table:
function deleteLastColumn() {
$("#theadID tr th:not(:last-child)......
$("#tbodyID tr td:not(:last-child)......
}
So the result should be this:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
</tr>
</tbody>
</table>
I know there is the ":not(last)" method, but I can't find any example to my problem.
Could anyone help me?

Try
$('#persons tr').find('th:last-child, td:last-child').remove()
Demo: Fiddle

You can use this solution to achieve it easily..
function myFunction() {
var allRows = document.getElementById('my_table').rows;
for (var i=0; i< allRows.length; i++) {
allRows[i].deleteCell(-1);
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="my_table">
<thead >
<th>Column 1</td>
<th>Column 2</td>
<th>Column 3</td>
</thead >
<tr >
<td>Number 1</td>
<td>String 1</td>
<td>Decimal 1</td>
</tr>
<tr >
<td>Number 2</td>
<td>String 2</td>
<td>Decimal 2</td>
</tr>
<tr >
<td>Number 3</td>
<td>String 3</td>
<td>Decimal 3</td>
</tr>
</table><br>
<button onclick="myFunction()">Remove Last Column</button>
</body>
</html>

In addition to Arun P Johny's answer,
That would let you remove last row each time you click the button. If you just want to remove one column, not others you may try this.
function deleteLastColumn() {
$(document).find('.last').remove()
}
after adding class last to the last td and th of the table.
Demo : Fiddle

Responsive table, possible for nested table cell widths to inherit

I've got a responsive table, which has different content in each row and a concertina mechanism on each row.
The concertina essentially adds another table row beneath that current row, which has a td with a colspan for the amount of cells in the table.
Inside this concertina I have another table which I need the table cells to line up with the parent table. I appreciate this probably isn't possible with HTML/CSS alone and probably needs to be done with JS?
Or is there another way?
I can't post all my code here but here is a screenshot of what I mean
<table class="parent-table">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td colspan="6" class="concertina">
<div>
<table>
<tr>
<td>Other 1</td>
<td>Other 2</td>
<td>Other 3</td>
<td>Other 4</td>
<td>Other 5</td>
<td>Other 6</td>
</tr>
</table>
</div>
</td>
</tr>

Short answer would be 'No', not possible just with HTML/CSS. I myself am working on a fixed-header, scrollable table with resizable columns, plus double-click column header border to autofit. It's far from complete, and I can tell you if that is roughly the direction you might be heading, you might want to take a deep breath.
UPDATES BELOW
Judging from the screenshot, have you considered revising the HTML structure?
From the markup below, you have multiple <tbody> sections, each with a first <tr> that contains <th> elements. The rest would be showing details data, rows of <tr> that contains typical <td> elements.
In jQuery, you can use $('tr:has(th)') to select the header row, and $('tr:has(td)') to select the data rows.
The last <th> in the header would house your "More/Less" control, which simply shows/hides the subsequent data rows.
Would this work for you instead?
<table class="master-table">
<tbody class="concertina">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>More</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td colspan="2">Cell 6</td>
</tr>
</tbody>
<tbody class="concertina">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>More</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td colspan="2">Cell 6</td>
</tr>
</tbody>
</table>

Reset your tables using this bit of CSS:
table {
border-collapse: collapse;
border-spacing: 0;
}
Then you will have to set the width of the <td>s

Unexpected Behavior of :even pseudo selector in jquery

I have created this fiddle for problem as you will see there are three tables having zebra strip using jQuery.
Table 1 is showing in correct form as it start tr index from 0 as even. Table 2 is continuing from last table and it is showing 1st row as white instead of dark. I think it is happening due to it is continuing from last table's tr index.
HTML:
<table>
<caption> Table 1</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>
<table>
<caption> Table 2</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>
<table>
<caption> Table 3</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>​
JavaScript:
$('table').find('tr:even').css('background','#d0d0d0');
Fiddle: http://jsfiddle.net/daljir/gryh5/

You can use find() to 'work' with each table separately:
$("table").find("tr:even").css("background", "#d0d0d0");
DEMO: http://jsfiddle.net/gryh5/1/

You are selecting all the <tr> elements in the document, you can use the nth-child to selector to select all the even numbered <tr>s in the document.
$('table tr:nth-child(2n)').css('background','#d0d0d0');
http://jsfiddle.net/Kyle_Sevenoaks/gryh5/7/

This is because you are selecting all the tr's in general (irrespective of the table) and when they are stacked you would get this particular behavior.
Try this:
$('table').find('tr:even').css('background','#d0d0d0');
Check FIDDLE

This works
<table id="t1">
<caption> Table 1</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>
<table id="t2">
<caption> Table 2</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>
<table id="t3">
<caption> Table 3</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>
and JS:
$(function(){
$('#t1 tr:even, #t2 tr:even, #t3 tr:even').css('background','#d0d0d0');
});
jsfiddle: http://jsfiddle.net/SnakeEyes/gryh5/2/

http://jsfiddle.net/gryh5/9/
$('table').each(function(){
$(this).find('tr').filter(':even').css('background','#d0d0d0');
});