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)
Related
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/
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
I have table which is being dynamically created.
I would like to try not to have any more attributes in the table (like an ID field).
It is a multilevel table where all the TableRows should be expandable and collapse on click in any of the TD in each row.
$('.fylke_click').click(function () {
$(this).parent().nextUntil('.fylke').slideToggle(0);
$('.sted').hide();
});
$('.kom_click').click(function () {
$(this).parent().nextUntil('.kommune').slideToggle(0);
});
See this simplified fiddle:
http://jsfiddle.net/T2Lwn/
So it's basically 3 levels and it is a lot of problems here.
One obvious one is when you are on the second level, which is called "kommune" and if you click on the last TR it removes the "fylke" underneath. As you can see if you click on "MIDTRE GAULDAL"
This is probably because I use .Parent() and I need some sort of if check if I am on the last row?
Is it also other problems with this code? Can I specify the click method class="fylke_click" and class="kom_click" on a more general level?
For example for all <tr class="fylke"> each TD class will have class="fylke_click" and same for kommunne?
If I understand your issue correctly this may help:
Demo Fiddle:
Since you said you're going to be dynamically creating this content, I would recommend delegating off of the main table instead of making a click handler for each row. Also, since all of the stuff you want to show / hide are siblings and not nested, things get a bit tricky. You'll need to be specific with your .nextUntil() by passing a filter, and I found a :not() on the filter was necessary.
Again, since these are all siblings, it's not as easy as hiding the children of the header row, so I set up an "open" class to check if the header was open or not, and hid / showed stuff depending on if it was already open.
JS:
$('.kommune').hide();
$('.sted').hide();
$('.table').on('click', 'tr', function(){
$this = $(this);
if( $this.hasClass('fylke') ){
if ( $this.hasClass('open') ) {
$this.toggleClass('open').nextUntil('.fylke', 'tr').hide();
}
else {
$this.toggleClass('open').nextUntil('.fylke', 'tr:not(.sted)').toggle();
}
}
else if ( $this.hasClass('kommune') ){
$this.nextUntil('.kommune', 'tr:not(.fylke)').toggle();
}
});
I have a table with the odd and even rows with a different CSS style tr:nth-child(2n){...}, and when I filter them with a textbox and jQuery, I hide() all the rows except the ones that match my criteria.
The problem is that now the rows remain with the current style (as I assume they keep the position despite they can't be seen), so the new odd and even rows doesnt match the CSS pattern.
How could I fix it?
Try to follow this example:
jQuery('tr:visible').filter(':odd').css({'background-color': 'red'});
jQuery('tr:visible').filter(':even').css({'background-color': 'yellow'});
Check here:
http://jsfiddle.net/KSL7j/1/
Hope it helps
Update
You can check this other example with odd and row CSS classes.
As CAbbott suggested in this fiddle: http://jsfiddle.net/KSL7j/21/
nth-child checks for the nth-child, not for the nth visible child or th nth whatever-styled child (hide() just adds display:none and nothing more...) and will never do.
I see two possible solutions:
1.add classes even/odd after filtering, just asking for the visible ones and then use your css on those classes
untested code:
var rows = $(tr[#display=block]);
rows.each(function(){
var index = rows.index(this);
if(index%2==0){
$(this).addClass('even');
}
else{
$(this).addClass('odd');
}
}
2.really remove the rows, not just hiding them
when you use hide() it is just set the display to none.
the structure of the dom is not modify so the nth-child do not work as you expected
you need to remove the even tr to get the effect you want.
if you want reset the rows. you can hold them in a variable and restore them back
var rows = $("tr");
var even = rows.filter(":even");
$("#trigger").click(function () {
even.hide();
even.remove();
});
http://jsfiddle.net/R2gBt/
If I have a table
<table id="myTable"><tr><td>First Thing</td><td>First Value</td></tr>
<tr><td>Second Thing</td><td>Second Value</td></tr>
<tr><td>Third Thing</td><td>Third Value</td></tr>
</table>
How can I use JQuery or javascript to search to get the index of the row with text "Second Value" and remove it? Also is it possible to create a new row
<tr><td>Fourth Thing</td><td>Fourth Value</td></tr>
with the click of a button? Will I have to iterate through the existing rows to get the last index of the row to insert it in?
You can achieve this easily using the :contains() selector, the remove() function, and the append() function. You don't need to iterate through the rows to find what you're looking for.
To get the index:
$("#myTable").find("td:contains('Second Value')").parent().index();
To remove it:
$("#myTable").find("td:contains('Second Value')").parent().remove();
To add a row:
$("#myTable").append("<tr><td>Fourth Thing</td><td>Fourth Value</td></tr>");
working example: http://jsfiddle.net/hunter/PzJWC/
You should ideally generate id's per each tr/td - but thats if you getting data dynamically i suppose.
If you know the order of your tables then you can use these sleectors from jQuery
$('tr:last-child').html('<p>This is the absolouty last tr in the WHOLE page<p>')
$('tr:nth-child(even)').addClass('evenColors')
$('tr:nth-child(4n)').remove() //Removes the 4th from the top TR DOM Element
var theValueOf = $('tr:first-child').html() //assigns the innerHtml to your var
So if you have 10 tables each table should have an id or class
<table id="table1"> ...bla... </table>
$('table1 tr:last-child').remove() //Remove last TR from Table1
You will need to structure your html more with id's and classes
In your case you will have to restructure your table some how programatically to atach unique ids to each row then use jquery to select it. This is ideal world
But you do a loop and check each inner html until what you want and do a .remove()
But to get the INDEX use hunters reply! But from experience this is a headache on large and dynamic documents.
JQuery has .insertAfter and insertBefore. For targeting you can also use nth-child css selector or if you want it dynamic (like insert a row after the row they click) you can use the 'this' operator and some dom navigation. All that said be very careful when editing tables on the fly, they have some peculiarities about where things can be inserted and are heavy on performance.
i just did it ;)
to add row (you may not want to use append because your table may have tbody etc):
$('#myTable tr:last').after('<tr id="forth_row"><td>forth thing</td><td>forth value</td></tr>');}
to find and remove that row:
$('#myTable').find("#forth_row").remove();