I have 4 tables with about a hundred rows in each table. Each table has its own unique ID (ABC1, ABC2, etc) and each row of each table row has its own unique ID (ABC1-Val1, ABC1-Val2, etc). Each of the rows has its own checkbox (with its own unique name).
I am looking for a piece of JavaScript (possibly working with jQuery) that will work from a button click which, when clicked, the will display only the rows of the tables that have been selected. [Possibly include a remove filtering too].
Thinking out loud - I could use a span with a hidden element toggled between 0 and 1 if the checkbox is unchecked/checked.
Can anyone shed some slight on how to achieve this please?
Possibly something like this?
http://jsfiddle.net/HegPJ/2/
html:
<table border="1" id="tableId1">
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
</table>
<hr/>
<input type="button" value="Filter" id="filterButt"/>
<input type="button" value="Reset" id="resetButt"/>
JS:
$('#filterButt').click(function(){
$('#tableId1 tbody').find('tr:not(:has(:checkbox:checked))').hide();
});
$('#resetButt').click(function(){
$('#tableId1').find('tr').show();
$('#tableId1 input:checkbox').removeAttr('checked');
});
This should work fine:
<div>
<button type="button" id="filterTablesbtn">Filter</button>
<button type="button" id="clearFilterbtn">Clear Filter</button>
</div>
ABC1
<table id="ABC1">
<tr>
<td>Test</td><td><input type="checkbox"/></td>
</tr>
<tr>
<td>Test 2</td><td><input type="checkbox" /></td>
</tr>
</table>
ABC2
<table id="ABC2">
<tr>
<td>Test</td><td><input type="checkbox"/></td>
</tr>
<tr>
<td>Test 2</td><td><input type="checkbox" /></td>
</tr>
</table>
ABC3
<table id="ABC3">
<tr>
<td>Test</td><td><input type="checkbox"/></td>
</tr>
<tr>
<td>Test 2</td><td><input type="checkbox"/></td>
</tr>
</table>
window.onload = function()
{
$('#filterTablesbtn').click(function(){
filterTable('ABC1');
filterTable('ABC2');
});
$('#clearFilterbtn').click(function(){
clearFilter('ABC1');
clearFilter('ABC2');
});
}
function filterTable(id)
{
$('#' + id + ' tr').each(function(){
if($(this).find('input[type=checkbox]').is(":checked"))
$(this).hide();
});
}
function clearFilter(id)
{
$('#' + id + ' tr').show();
}
See the fiddle here:
http://jsfiddle.net/SpAm/pSzk7/
Related
If I have the following table, which I can't manually touch, but can apply javascript to...
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
...when the DOM loads fully, how can I remove every instance of <tr><td height="10"></td></tr> from the above table via jQuery or raw JavaScript? I don't need that row at all and its causing design issues for me. This is my first time trying to learn how to replace a full pattern of elements.
Hopefully, this is doable via JavaScript?
This should do the trick.
jQuery
$('td[height="10"]').parent().remove();
https://jsfiddle.net/uzv3fn2e/1/
Vanilla JS
Array.from(document.querySelectorAll('td[height="10"]')).forEach(td => td.parentNode.remove());
https://jsfiddle.net/t7y6aqc5/
You can use :has() selector to select tr that has td with specific attribute
$("tr:has(td[height='10'])").remove()
$("tr:has(td[height='10'])").remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
without using jquery javascript has also remove()
document.querySelectorAll("td").forEach(el => el.getAttribute("height") === "10" && el.parentNode.remove())
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
the code below allows reordering of table rows (moving a row up or down)
for some reason, the following code in IE11 allows changing the header row as well , although i specified "tbody tr:first" as my filter
what am I doing wrong?
function upAction(){
var row = $("input[name='select_radio']:checked").parents("tbody tr:first");
row.insertBefore(row.prev());
}
function downAction(){
var row = $("input[name='select_radio']:checked").parents("tbody tr:first");
row.insertAfter(row.next());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button onclick="upAction()">Up</button>
<button onclick="downAction()">down</button>
<table >
<tr>
<th>Printer</th>
<th>Printer ID</th>
<th>Printer Description</th>
</tr>
<tbody>
<tr>
<td><input type="radio" name="select_radio"/></td>
<td>x300</td>
<td>3</td>
<td>new printer installed in 3th floor</td>
</tr>
<tr>
<td><input type="radio" name="select_radio"/></td>
<td>x400</td>
<td>5</td>
<td>laser printer</td>
</tr>
<tr>
<td><input type="radio" name="select_radio"/></td>
<td>Office jet 3</td>
<td>6</td>
<td>old student printer</td>
</tr>
</tbody>
</table>
Got a tricky one where I want to add a class to all the parent <tr>'s of <td>'s which have either a <span> or a <div> element within them. So I have a table with markup as below:
<table>
<tr>
<td>
</td>
<td>
</td>
<td>
<div>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<span></span>
</td>
<td>
</td>
<td>
<div>
</div>
</td>
<td>
</td>
</tr>
</table>
So I want the <td>'s that have either a <span> or <div> to have a class added to them by jQuery...
I can't seem to work out how to loop through all the <td>'s to check their descendant and then add the class to those that have either a <span> or <div> inside... Is this possible?
Thanks for any light you can shed on it! It's driving me mad!
You can check with .has() if tr has div or span as a descendant:
$('table tr').has('div,span').addClass('someClass');
Check the below snippet:
$('table tr').has('div,span').addClass('someClass');
.someClass {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>td 1</td>
<td>td 2</td>
<td>
<div>div</div>
</td>
<td>td 3</td>
</tr>
<tr>
<td>td 1</td>
<td>td 2</td>
<td>td 3</td>
<td>td 4</td>
</tr>
<tr>
<td><span>span</span>
</td>
<td>td 1</td>
<td>
<div>div</div>
</td>
<td>td 2</td>
</tr>
<tr>
<td>td 1</td>
<td>td 2</td>
<td>td 3</td>
<td>td 4</td>
</tr>
</table>
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
I am trying to do hide the belonging rows. For example if you click on 'Sub Title 1' which will then hide Item 1, Item 2 and Item 3 rows only.
Example:
<table border="1">
<tbody>
<tr class="head">
<td> title </td>
</tr>
<tr class="sub-title">
<td>Sub Title 1</td>
</tr>
<tr> <td>Item 1</td> </tr>
<tr> <td>Item 2</td> </tr>
<tr> <td>Item 3</td> </tr>
<tr class="sub-title">
<td>Sub Title 2</td>
</tr>
<tr> <td>Item 4</td> </tr>
<tr> <td>Item 5</td> </tr>
<tr> <td>Item 6</td> </tr>
</tbody>
</table>
-
$('.sub-title').click( function() {
$(this).parent().nextUntil('.sub-title').toggle();
})
It doesn't seem to work...
nextUntil selects for siblings, not children. Remove the "parent" from your call.
Edited to respond to further question about excluding some rows based on class. Obviously you can also accommodate Kolink's response about preventing toggle's "display: block" overwriting the default "display: table-row", but as long as you test in all supported browsers, I don't see any problem with using toggle.
$('.sub-title').click( function() {
$(this).nextUntil('.sub-title').each(function() {
if (!$(this).hasClass('order'))
$(this).toggle();
});
});
You have to toggle manually:
$(".sub-title").on("click",function() {
$(this).nextUntil(".sub-title").each(function() {
this.style.display = this.style.display == "none" ? "" : "none";
});
});