I have table with class tablesorter. In that table is tbody that contains many of tr. In tr is td class=status that showing "UP" text. I need to get in every tr and check if the td class=status is UP. If is not UP then I need to hide that tr. HTML is on the picture.
Any ideas?
First get the list of trs from the table and convert to an array:
[...document.querySelector('table').querySelectorAll('tr')]
// then forEach over the array to conditionally hide the row
.forEach(tr => {
// select the element with class 'status' check if txt is not UP
const el = tr.querySelector('.status');
if (!el || el.textContent.trim() !== 'UP') {
tr.style.display = 'none'; // hide tr
}
});
Related
I have a table that highlight the tr (row) on click, and I can highlight multi rows on every click but I want to have only one row to be highlight in table. how to remove the highlight class from sibling rows. code below
JavScript
document.querySelector("table").addEventListener("click", function (e) {
// Is it a click on a tr in this table?
var tr = e.target.closest("tr");
if (tr && this.contains(tr)) {
// Yes, toggle highlight
tr.classList.toggle("highlight");
}
});
css
.highlight {
background-color: #ffeaea;
}
If you don't mind I used #CBroe's suggestion here, to remember the previously selected TR:
let prevTr = undefined
document.querySelector("table").addEventListener("click", function (e) {
let tr = e.target.closest("tr");
if (tr && this.contains(tr)) {
if(prevTr) prevTr.classList.remove("highlight")
tr.classList.add("highlight");
prevTr = tr
}
});
I ended up adding below code and issue resolved.
$('.table tr').removeClass("highlight");
I have a html table with 3 columns and 7rows. When I click on a cell its bg is changed to red. I want to make sure that only one cell from each row is selected. So if I am clicking on a cell from row1, which has already a cell selected, I want the prev cell to be deselected and the new cell selected. I want to know how can I figure out that cells are of same row.
Given a table cell, its parentNode will be the containing row, and table rows have a cells property that contains a collection of all the cells. So you can loop through that collection.
function selectCell(cell) {
var siblings = cell.parentNode.cells;
for (var i = 0; i < siblings.length; i++) {
if (i != cell.cellIndex) {
siblings[i].style.backgroundColor = normalBGColor;
}
}
cell.style.backgroundColor = highlightBGColor;
}
If you are using jQuery, in your click handler, do this:
function() {
$(this).closest('tr').find('td').css('backgroundColor', '');
$(this).css('backgroundColor', 'red');
}
You can iterate through the rows, and iterate through the cell in an embedded for loop. The solution provided by John Hartsock on this stackoverflow page should allow you to qualify each cell by row and column.
How do I iterate through table rows and cells in javascript?
I am using jquery datatables. I want to clear table except the first row.
var table = $('tableId').DataTable({});
Sample:
tr1
tr2
tr3
table.clear().draw(); //This clear all rows, How do I exclude first row
clear table:
tr1
How about this - I've used .rows().remove() instead of .clear(), so I could select which rows should be removed.
$('#deleteAll').click(function(){
//get first element
var firstElement = $('tbody > tr').first();
/*remove all <tr> which are coming after the first element and
redraw the table */
table.rows(firstElement.nextAll('tr')).remove().draw();
});
Fiddle
I have a html page that has table with table heading.
I want to delete the table on load if it does not contain any rows on loading the document.Please mind that I do not want to click or any other things.
<table class="Example:">
<th>Range from 12.12 to 1.12</th></table>
<table class="Range:">
<th>Range from109.091to111.364</th> <tr><td>f88c6441-3a2f-4c63-8b00-f63a75c09d57</td>
<td class="number">110.000</td></tr>
</table>
I want to delete the first table and keep the second. Mind that there can be dynamic number of such tables
You are missing a tr element outside the th.
You can get the number of rows of the table and if bigger than 1 (first is the heading) hide the table.
Code:
var rowCount = document.getElementsByClassName('Example')[0].rows.length;
if (rowCount<=1){
document.getElementsByClassName('Example')[0].style.display = 'none';
}
Demo: http://jsfiddle.net/IrvinDominin/HLv9c/
Use jQuery :
$("table:not(:has(td))").remove();
Get all elements without child node in jQuery
Javascript :
var table = document.getElementsByTagName("table");
for (var i = 0, a = table[i]; i < table.length; i++, a = table[i]) {
if (a.getElementsByTagName("td").length === 0) {
a.parentElement.removeChild(a);
}
}
Demo : http://jsbin.com/vuzin/1/edit
With jquery:
<script>
$(document).ready(function(){
$('table').each(function(){
if($(this).find('td').length <= 0){
$(this).remove();
}
});
});
</script>
I have an html table, and i add a class on one row.
The class is applied this way, and i later want to swap the rows.
$('.bTable').on('click', 'tbody tr', function(event) {
if($(this).attr('class')!='highlightgreen'){
$(this).addClass('highlightgreen').siblings().removeClass('highlightgreen');
}else{
$(this).removeClass('highlightgreen');
}
});
I cant seem to be able to select that class row with eq().
Error example: i try to alert() the a and the row appears fine, i alert() the b, and null comes up.
var a = $('.bTable tbody tr').eq(0);
var b = $('.bTable tbody tr .highlightgreen').eq(0);
How can i select properly that .highlightgreen row?
When selecting a TR with a class, you do $('tr.className'), notice there are no spaces.
When selecting an element inside a TR that has a class, you do $('tr .className').
So just remove the space
var b = $('.bTable tbody tr.highlightgreen').eq(0);
And eq(0) will get the first element in the collection
$('.bTable').on('click', 'tbody tr', function(event) {
$(this).toggleClass('highlightgreen')
.siblings().removeClass('highlightgreen');
});