Develop Reference

JavaScript remove class from table rows

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");

jQuery, check classes against array

The title of this question may be misleading, but I could not think of a better way to word it.
Let me get to the point. I am using buttons to filter a table of statuses. If I have button A and button B active, I only want to display A and B, the rest are hidden. Currently I can only have it display either A or B, not both.
var aSelected = [];
$(".admin_view #filterTable tr td button").on("click", function() {
$(this).toggleClass("selected"); //class to show user button is active
//Add to array if not in already
if ($.inArray(this.id,aSelected) == -1) {
aSelected.push(this.id);
//Remove from array if button is not active
} else if ($.inArray(this.id,aSelected) >= 0) {
aSelected.splice(aSelected.indexOf(this.id), 1);
}
//Show all if array is empty
if (!aSelected.length) {
$(".admin_view #applicantTable tbody tr").each(function() {
$(".admin_view #applicantTable tbody tr").removeClass("hidden");
});
}
//This is the section I need help with
$.map(aSelected, function(a) {
$(".admin_view #applicantTable tbody tr").not("."+a).addClass("hidden");
$(".admin_view #applicantTable tbody tr."+a).removeClass("hidden");
});
});
I need to find a way to compare against the entire array, not against one piece.

Currently, you hide all other elements for every item in aSelected, instead of only at the beginning. If you instead first hide everything and then show the elements you want, it should work:
//This is the section I need help with
$(".admin_view #applicantTable tbody tr:not(.hidden)").addClass("hidden");
$.map(aSelected, function(a) {
$(".admin_view #applicantTable tbody tr.hidden."+a).removeClass("hidden");
});

jQuery DataTables clear table except the first row

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

Select the row TH of related TD

http://jsfiddle.net/wT3Ev/
How do i retrieve the text that is in the row TH of the selected td?
Yes i found some related posts, but nothing that does the trick for me.
I tried:
$(document).on("click", "#sTab td,#pvTab td", function () {
alert($('#sTab tr').find('th:nth-child(' + $(this).parent().index() + ')').innerHTML);
alert($(this).parent());
var th = $(this).closest('table').find('th').eq( this.cellIndex );
alert(th.innerHTML);
}

I'd suggest:
/* binds a click-handler to the 'tbody' element,
filters those clicks to only those that originate on a 'td' element:
*/
$('tbody').on('click', 'td', function(){
/* gets the siblings of the clicked 'td' element, filters those siblings
for 'th' elements, gets the first of those matching elements,
and then retrieves the text of that element, assigning it to the variable:
*/
var thText = $(this).siblings('th').first().text();
console.log(thText);
});
JS Fiddle demo.
Or, using a little more DOM (a tiny, tiny efficiency increase):
// same as above:
$('tbody').on('click', 'td', function(){
/* using DOM (not jQuery), moving from the clicked 'td' element
to its parentNode ('tr'), retrieving the first of its children
(JavaScript is zero-indexed, the first child is at position '0'),
and retrieving its textContent (the text of the 'th'):
*/
var thText = this.parentNode.children[0].textContent;
console.log(thText);
});
JS Fiddle demo.
References:
first().
on().
siblings().
text().

This should work:
var index = $(this).index();
console.log($(this).parents("table").find("th:eq(" + index + ")").text());
Edit: row header: console.log($(this).closest("tr").find("th").text());
Fiddle: http://jsfiddle.net/wT3Ev/4/

You weren't too far off. This works with your example:
$(document).on("click", "#sTab td,#pvTab td", function () {
var tdIndex = $(this).index(),
table = $(this).closest('table'),
headingIndex = tdIndex + 1,
thText = table.find('th:nth-child(' + headingIndex + ')').text();
alert(thText);
});

$(this).parent().find('th').html();
edit: explanation - row is always cell's parent so no need to look for index - just look for header in the row where you have the cell.
http://jsfiddle.net/qA6R9/

Using JQuery to switch selected row of table

I have a table. When a row is clicked on, it is given .active and the row is highlighted. I need to work on other ways to change the selected row other than clicking on it. For my example, I've chosen a next button.
http://jsfiddle.net/dHxKW/
I can do the logic behind what happens when it gets to the end of the table or anything else like that.
I just need help figuring out how to get the index of the TR with class active so that I can increase the index, which then I can give the next row the active class... That's all I need to do... how to get that row index.
This is some of the stuff I've tried that doesn't work...
alert( $('table tr .active').index() );
var row = $('table tr.active').first();
alert(row.index() );
alert($("table").index( $('table tr .active') ));
This is what I'm using as a reference (https://stackoverflow.com/a/469910/623952)
var index = $("table tr").index($(this));
but I can't get the selectors right...
Solution.....
it would have never worked... I wrote bad code:
$(this).children("tr").addClass("active"); (this = clicked on tr in the click function)
But new code:
http://jsfiddle.net/dHxKW
$("#table_one").on("click", "tr", function () {
$(".active").removeClass("active");
$(this).children("td").addClass("active");
// removed line: $(this).children("tr").addClass("active");
$(this).addClass("active");
});
$('#btn_next').on('click', function ()
{
// right here **********
var n = $('tr.active').next();
$(".active").removeClass("active");
n.children("td").addClass("active");
n.addClass("active");
});
** Just as a note, I am adding the class to both the tr and td's... I'm not sure if this is the best way but tr doesn't have background properties, so I just added it to both. I think this might be the reason for my confusion....

The issue is that the "active" class is not being added to the "tr" elements.
In this line you are looking for tr children of this, but this is a tr, thus no children get selected: $(this).children("tr").addClass("active");
Instead try $(this).addClass("active");

var counter = 0;
var index = -1
$('table tr').each(function(){
if( ! $(this).hasClass('active')) {
counter++;
}
else index = counter;
})

$('td.active').parent().index('tr')
will get you the index.
jsFiddle example
jsFiddle example 2
BTW, the link in your click function $(this).children("tr").addClass("active"); would seem to do nothing as it searches for a child row of a row.

$('table tr .active').removeClass('active').parent().next().children('td').addClass('active');
this should do it