Trying to collapse certain tables not all tables - javascript

I have a script that currently collapses all rows except for a title row. How do I only target tables that I want to collapse? (e.g. any table with the class no-collapse, should not collapse)
JQUERY:
$('tbody > tr:not(".collapse")').hide();
$('.collapse').click(function(){
$(this).nextUntil('tr.collapse').toggle();
});
JSFIDDLE

Change the first line to:
$('table:not(".no-collapse") tbody > tr:not(".collapse")').hide();
jsFiddle example

You already have similar logic in your selectors. Just add table:not(.no-collapse).
e.g.
$('table:not(.no-collapse) tbody > tr:not(".collapse")').hide();
$('.collapse').click(function(){
$(this).nextUntil('tr.collapse').toggle();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/e8jeb5me/4/

Related

How to find adjacent td of a speicifc column of a table

I am trying to control a specific column of a table using jQuery.
I would like to select the next or the previous td contained in the column number 5 starting, for istance, from the second one and change the related text or css properties of the adjecent ones.
$(document).ready(function() {
$('table.pl_res_game tr td:nth-child(5)').eq(0).addClass('change');
The column can contains 3 or more than 100 td. I tried to use the method next() and previous
$('table.pl_res_game tr td:nth-child(5)').eq(0).next();
but I could not select the adjacent ones.
This is the example:
FIDDLE
I would like to select all td contained in the column number 5
In this case you just need to remove eq(0) from your current code, as that is restricting the selection to the first td found:
$('table.pl_res_game tr td:nth-child(5)').addClass('change');
Example fiddle
I would like to select the next or the previous td
In this case use prev() and next() to find it:
var $td = $('table.pl_res_game tr td:eq(1)');
$td.next().add($td.prev()).addClass('direct-sibling');
Example fiddle
to select elements form next row
$('table.pl_res_game tr td:nth-child(5)').eq(0).closest('tr')
.next()
.find('td:nth-child(5)').css({'background-color':'green','color':'#fff'});
FIDDLE
jsut use prev to select previous td of same row
$('table.pl_res_game tr td:nth-child(5)').prev()
.eq(0)
.css({'background-color':'green','color':'#fff'});
FIDDLE
try modifing the index of the eq() like in the sample below:
$('table.pl_res_game tr td:nth-child(5)').eq(1).css({'background-color':'green','color':'#fff'});
$('table.pl_res_game tr td:nth-child(5)').eq(2).css({'background-color':'green','color':'#fff'});
and so on
You can then use a for loop for the range you want to select:
$(document).ready(function() {
for (var i=0;i<3;i++){
$('table.pl_res_game tr td:nth-child(5)').eq(i).css({'background-color':'green','color':'#fff'});
}
});
JSFIDDLE

Hiding only Empty tables that have the same css class

So I've searched this forum and clicked almost every link even relevant to my problem so if I missed a blatant post about this I apologize. Here's my situation. I have some dynamically generated tables that all have the same css class (they have to for a check box I have that hides them). The thing is I want to hide tables that don't have any data in them but show the ones that do. I have pieced together some code but what I have ends up hiding all tables with the same CSS class if one of the tables are empty. I say empty but they all have at least one td and I'm counting if it only has one td to hide the table.
Here is the code I have at the moment....
<script type="text/javascript">
$(document).ready(function () {
$('.devTable').each(function (i) {
//select all tds in this column
var tds = $(this).parents('.devTable')
.find('tr td:nth-child(' + (i + 1) + ')');
if (tds.length <= 1) {
$(this).parent().hide();
}
})
});
</script>
I know it's something simple I'm missing.
can use filter(). I am basing this on any table of the class with no more than one <td>
$('.devTable').filter(function(){
return $(this).find('td').length <=1;
}).hide();
Reference: filter() API Docs

Enable and add CSS Class for all the input elements inside a HTML table

I have a table with input type="text" elements in some of the TDs and the table have multiple rows (not more than 5) with the same structure.
Is there a way to enable and add some CSS classes to all the input elements in the table using jQuery or JavaScript?
Simply
$("table input").addClass("yourClassName");
will do the trick. All input fields that comes under table tag will now have a class "yourClassName"
$("table input").attr('disabled','disabled').addClass('classes');
Try this
$('table tr td').find('input:text').each(function(){
$(this).prop('disabled',false); // this line enable the text box
$(this).addClass('urclass'); // this line add the class to text box
});
OR
$('table tr td').find('input:text').prop('disabled',false).addClass('urclass');
Do this way :
$('table').find('input:text').prop('disabled',false).addClass('urclass');
$('table td input:text').addClass('yourClass').prop('disabled', true);

jquery how to show-hide table column

How can I hide a entire table column with jQuery?
I managed to hide a single td, but not the other 2 tds under it. Code to hide table td:
$("#td_maand").hide();
Give all the same column tds the same class, then $(".columnClass").hide();
e.g.
<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<script>$(".firstcolumn").hide();</script>
You can use the nth-child selector to achieve that, use it like this:
$('#yourtable tr td:nth-child(3)').hide();
that will hide your third column.
You can do it easily:
var i = [your_column_index];
$('td:nth-child(' + i + ')').hide();​
You can use
$(this) // assuming this points to a td
.closest('tbody') // find closest tbody (container)
.find('> tr > td:nth-child('+$(this).index()+')') // find all td in the same column
.hide(); // hide them
Demo at http://jsfiddle.net/jFv6d/
(it hides the clicked column)
try $("#td_maand").parent().hide();

expanding on the multiple tables, jquery selector problem

Expanding on this problem right here: jQuery selectors for even/odd rows in a table
If the table from his example is a class and not an ID, say for dynamically created tables, how can one stop the :odd class from being added (incorrectly) to table 2?
http://jsfiddle.net/techii/hhWNE/10/
I want a "reset/clear" before the next table starts. That however is proving pretty difficult.
This works:
$(document).ready(function() {
$(".table").find("tbody > tr:odd").addClass("odd");
$(".table").find("tbody > tr:even").hide();
$(".table").find("tbody > tr:first-child").show();
$(".table tr.odd").click(function() {
$(this).next("tr").toggle();
});
});
By not using a single selector, it resets the parity for each table.
many ways, you can do a :first or .first() (if it's only the first table)

Categories

Resources