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");
});
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");
Please see this jsfiddle.
My setup has the following two tables: simTable = datatable-simf-sim and resTable = datatable-simf-res.
I am trying to add a row into resTable everytime the user selects (clicks) on a row in simTable, this works great. However when the user deselects the row, it should be removed from simTable.
resTable = $('#datatable-simf-res').dataTable({});
simTable = $('#datatable-simf-sim').dataTable({});
$('#datatable-simf-sim tr').click(function () {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
var uniqueid = $(this).closest('tr').children('td:eq(0)').text();
$('#datatable-simf-res tr td').each(function () {
if ($(this).text() === uniqueid) {
var rowindex = $(this).closest('tr').index();
resTable.fnDeleteRow(rowindex);
}
});
} else {
$(this).addClass('row_selected');
var rows = [];
$(this).closest('tr').find("td").each(function (cell, v) {
rows.push($(this).text());
});
resTable.fnAddData(rows);
}
resTable.fnDraw();
});
When you play with the jsfiddle (just click a bunch of times on the rows) you will see that it will leave rows untouched, or removes the wrong rows. I am assuming is has to do with the way I identify a row in resTable, as this was the biggest bottleneck for me.
So how do I succesfully identify, and compare, two rows in two different tables?
Thank you very much.
Although the fiddle seems fine to me, a cleaner way to remove the row would be:
// iterate over rows, not all cells
$('#datatable-simf-res tr')
.filter(function () {
// check if the first column contains the unique ID
return $(this).find('td:first').text() === uniqueid
})
.each(function () {
// 'this' is the current DOM element, inside .each()
resTable.fnDeleteRow(this)
});
(The DataTables API says that fnDeleteRow accepts either an index or a <tr> element.)
Problem
I want to hide a row if a value appears in any of its child cells.
Desired Effect
Apply class to row, if one of its child cells contains a specific value
Bonus Challenge: Hide column containing the value, i.e. "admin-hide"
Example Code
$('tr').each(function(){
if($('td:contains("non-member")', this).length{
$(this).addClass('disabled');
}
});
Why?
Invaluable for tables containing information that needs to be:
toggled on/off without losing the back-end data, i.e. member roster,
with lapsed member rows having display: none;
highlighting particular rows, i.e. premium sponsors
Difficulties I've Faced
Hiding the column is problematic. If necessary, I can stick to just have hiding rows with child elements containing a string.
Tech I've Working w/
Wordpress 3.5.1
Jquery 1.10.1
Tablepress Pluging (which uses DataTables plugin for Jquery)
Attempt #1
This is what I have in the page editor in WordPress:
[table id=3 /]
<script>jQuery(function($) {
$('#tableID tr').filter(function() {
$('td', this).each(function() {
if ($(this).text().indexOf('admin-hide') != -1)
$('#tableID tr td:eq('+ $(this).index() +')').hide();
});
return $(this).text().indexOf('non-member') != -1;
}).addClass('disabled');
});</script>
<style>
.disabled {display: none;}
</style>
Attempt #2 - #adeneo
This hides the row but breaks Datatables/Tablepress:
<script> jQuery(function($) {
$('#tablepress-3 tr:contains("admin-hide")').addClass('disable-cells')
var index = $('td:contains("admin-hide")').index();
$('th,td', '#tablepress-3').filter('nth-child('+(index+1)+')').addClass('disable-cells'); });
</script>
<style>
.disable-cells {display: none;}
</style>
Attempt #3 - #SpenserJ
This hides the row, allows for Datatables. However, it doesn't hide the column.
<script>
jQuery(function($) {
$('#tablepress-3 td').each(function() {
if ($(this).text().indexOf('admin-hide') !== -1) {
// Hide the column without affecting the table formatting
$(this).css('visibility', 'hidden');
}
});
// Hide the entire row
$('#tablepress-3 tr:contains("admin-hide")').hide();
});
</script>
http://codepen.io/SpenserJ/pen/GqviI
jQuery(function($) {
$table = $('#tablepress-3');
$('th, td', $table).each(function() {
if ($(this).text().indexOf('Admin Only') !== -1) {
var index = $(this).index();
$('th:eq(' + index + '), td:eq(' + index + ')', 'tr', $table).hide();
}
});
// Hide the entire row
$('tr:contains("Membership Expired")', $table).hide();
});
jQuery(function($) {
$('#tableID tr').filter(function() {
$('td', this).each(function() {
if ($(this).text().indexOf('admin-hide') != -1)
$('#tableID tr td:eq('+ $(this).index() +')').hide();
});
return $(this).text().indexOf('non-member') != -1;
}).addClass('disabled');
});
Something like this?
// tr that contains the specific word - add class to
$('#tableid tr:contains("specific word")').addClass('yourclass');
// get column index of admin-hide
var index = $('#tableid td:contains("admin-hide")').index();
// and hide all th/tr in that column
// this is assuming when you initialized datatables you named it oTable as in var oTable = $('table').datatables()
oTable.fnSetColumnVis( index, false ); // for datatables
// or if you want to manually hide them
$('th,td', '#tableid').filter(':nth-child('+(index+1)+')').css('visibility','hidden');
If you are using dataTables - you can set visibility like this example. Also remove the +1 because the index for the method is 0 based also - http://www.datatables.net/examples/api/show_hide.html
using oTable
manually hiding visibility
using hide() works fine - i don't know why it was messing up your sorting
$('th,td', '#tablepress-demo').filter(':nth-child(' + (index + 1) + ')').hide()
$('table .classForRowThatCouldBeHidden').find('.someClassForHiddenValue').parent().hide();
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');
});
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