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
Related
I am trying to get the column name when the user clicks on the jquery datatable's footer cell.
I tried to follow this: https://datatables.net/forums/discussion/24593/retreive-column-idx-when-clicking-on-header
And, https://datatables.net/reference/type/column-selector
But, I am getting 'undefined' with the following code,
$('#myTable').on( 'click', 'tfoot th', function () {
var index = table.column( this ).index(); //index is returned as undefined
} );
Any suggestion will be greatly appreciated.
CAUSE
Columns can be selected only if you use header th nodes or table body td nodes, that's why it doesn't work.
SOLUTION
Try the code below to get actual column index.
Modifier :visible is needed because $(this).index() operates with actual DOM elements and returns index of the th node among currently visible columns. However jQuery DataTables may remove columns from DOM when using various extensions, such as Responsive, Buttons - Column visibility, etc, and actual column index may differ from index of the column in DOM.
$('#example').on( 'click', 'tfoot th', function () {
var index = table.column($(this).index() + ':visible').index();
});
See this example for code and demonstration.
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/
I have dynamically created HTML table clicking on its TH will reload the table according to sorted column.
What i want is to apply a class to the TH clicked.
Since the table is reloaded i first put the clicked column name in a Global variable and then when the table get reloaded i want to apply a CSS class.
The requirement is i want to search the THs in a TR by text (without iterating all elements) and then apply a class.
Any help is appreciated
Thanks
EDIT:
We cannot use :contains becuase two column names can contains similar text header
jQuery's filter function allows you to specify a function to be used as the filter.
$("th").filter(function() {
return $(this).text() == "foo";
}).addClass("newClass");
To apply a class to the th when clicked:
$(function () {
$('th').on('click', function () {
$(this).addClass('myClickedClass');
});
});
If you want to apply the class based on the match of a string, use this:
$(function () {
$("th:contains('" + myStringValue + "')").addClass('myClickedClass');
});
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)