I have this function which is responsible of making the table tr and th collapse. But in fact I don't want to collapse all the table columns (th and tr). I think because I am using $('tr th').click(function() so all the tr and th are collapsing. Is there any way I can exclude some columns? I don't want to move the title..
$('tr th').click(function() {
var index = (this.cellIndex + 1);
var cells = $('table tr > :nth-child(' + index + ')');
cells.toggleClass('collapsed');
if ($(this).hasClass('collapsed')) {
$(this).find('span').html('<b>+</b>');
}
else {
$(this).find('span').html('<b>-</b>');
}
if ($('table tr > th:not(.collapsed)').length)
$('table').removeClass('collapsed');
else
$('table').addClass('collapsed');
});
});
Here is my code: jsfiddle.net/9QkVd/20
To exclude the first column (title), you can use:
$('tr th:gt(0)').click(function() {
...
});
Updated fiddle: http://jsfiddle.net/9QkVd/22/
If I'm interpreting your question correctly, you want a function that collapses some headers but not all. See this fiddle.
All you need to do is slightly modify the selector for your .click function:
$('tr th.collapse').click(function() { ... }
and add a class collapsible onto the headers that you want to have this functionality. Change your CSS a bit so that your title isn't so large and you're done!
Related
I have a table with 3 columns and 6 rows. I want to copy the contents of some of them into a newly created column, but insert them in the middle. So that it looks like that:
With this aprroach:
$("table td:nth-child(2) [id$=2]").each(function(i) {
var $newCell = $(this).wrap('<td></td').parent();
var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
$(this).parents('tr').remove();
$newRow.append($newCell);
});
$("table td:nth-child(2) [id$=3]").each(function(i) {
var $newCell = $(this).wrap('<td></td').parent();
var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
$(this).parents('tr').remove();
$newRow.append($newCell);
});
I get that result:
So the new columns should be inserted between the very left column and the column with Abc and not at the very right.
FIDDLE.
To insert something in the middle of the table what you can do is use either before() or after(). For example, we want to insert our new cell before the Abc item so instead of inserting it on the end you can use the below code to insert it before Abc (being the last td):
// Find the last element, and add the new cell before it.
$newRow.find("td:last").before($newCell);
Fiddle Here
If you would like to be more specific, you can specify the element by it's text in the selector. So in this case you can state before a td element containing the text 'Abc':
$newRow.find("td:contains('Abc')").before($newCell);
I would like to use jQuery to select all rows in a table that don't have a td containing certain text.
I can select the rows with this line:
var x = $('td:contains("text"):parent'); //muliple td's in each tr
How would I use the :not selector to invert the selection?
edit: I don't think the line of code above is really accurate. This is how I originally had the line:
var x = $('td:contains("text")).parent(); //muliple td's in each tr
When I tried to invert the selection, I get all the rows as they all happen to contain a td not containing the text.
Try this:
var $x = $('td:not(:contains("text")):parent');
FIDDLE DEMO
Case 1: Select all TR that contains text 'my text' in all TD's
I wouldn't rely too much on the pseudo. Try something like below using filters, (internally pseudo are going to do the same anyway)
$('tr').filter(function () {
return $(this).find('td').filter(function () {
return $(this).text().indexOf('myText') == -1;
}).length;
}); //would return all tr without text 'myText'
DEMO: http://jsfiddle.net/dWuzA/
Case 2: Select all TR that contains text 'my text' in any TD's
#squint made an excellent point in comment
So incase if you want to select all TR that contains doesn't has a specific text in any of the TD's, then you can inverse the conditions.. See below,
DEMO: http://jsfiddle.net/dWuzA/1/
$(function () {
$('tr').filter(function () {
return !$(this).find('td').filter(function () {
return $(this).text().indexOf('22') != -1;
}).length;
}).addClass('highlight');
});
I have the following example http://jsfiddle.net/zidski/MxqRu/1/
When you click on 2010 I need valuation to disappear with the list items.
Here is the code which I am using to do this:
$("#yearfilter a").live("click", function(e) {
e.preventDefault();
//var v = $(this).val();
var v = $(this).attr("data-value");
if(v.length > 0) {
$('tr.reports').show();
$('tr.reports ul').hide();
$('tr.reports ul.year-'+v).show();
$('tr.reports').each(function() {
if($('ul:visible', this).size() == 0) {
$(this).hide();
}
});
} else {
$('tr.reports').show();
$('tr.reports ul').show();
}
});
I have done it in my project something like this:
function toggleRow(row_id) {
row_selector = "#row_" + row_id;
$(row_selector).toggleClass("shown hidden")
}
Then in the CSS:
.hidden {display:none;}
.shown {}
Then in the HTML I have alternating table rows, where the odd rows act as headings for the content in the even rows. Clicking an odd row toggles the visibility of the corresponding even row.
...
<tr onclick="toggleRow(17)">...</tr>
<tr class="hidden" id="row_17">...</tr>
...
Give each tr an ID something like id="row_2010" then look for that and hide the whole entire row at once.
UPDATE
I would strongly suggest not using so many tables and use more classes to classify your data structure. It would help your javascript be much more clean, concise and function easier.
UPDATE
I adjusted all your javacsript and some of your html. Here is a fully working example jsFiddle Demo
How do I select all cells in nth column of a normal html table. Ive tried this but its not working:
$('table#foo tbody td:nth-child(3)').each(function (index) {
$(this).addClass('hover');
});
UPDATE:
Heres a jsfiddle of the unworking code: http://jsfiddle.net/Claudius/D5KMq/
There is no need to use each for this.
$('table#foo tbody td:nth-child(3)').addClass('hover');
Other than that, there's nothing wrong with your code. Problem must be somewhere else.
Your actual problem (not evident in the original question, but there in the fiddle) is that .index() returns a zero-based value, but :nth-child() requires a one-based value.
$('table#foo tbody td:nth-child(3)').addClass('hover');
Use this script (draw your attention that with :nth-child selector index of each child to match, starting with 1)
$(".legendvalue", ".stmatst_legends").hover(function() {
var index = $('.legendvalue').index($(this));
$('table#stmstat tbody td:nth-child(' + (index + 1) + ')').addClass('hover');
}, function() {
//remove hover
});
I have a 5×7 HTML table. On many queries, there are fewer than 35 items filling the complete table.
How can I "hide" the empty cells dynamically in this case, using jQuery (or any other efficient way)?
Edit - Improved Version
// Grab every row in your table
$('table#yourTable tr').each(function(){
if($(this).children('td:empty').length === $(this).children('td').length){
$(this).remove(); // or $(this).hide();
}
});
Not tested but seems logically sound.
// Grab every row in your table
$('table#yourTable tr').each(function(){
var isEmpty = true;
// Process every column
$(this).children('td').each(function(){
// If data is present inside of a given column let the row know
if($.trim($(this).html()) !== '') {
isEmpty = false;
// We stop after proving that at least one column in a row has data
return false;
}
});
// If the whole row is empty remove it from the dom
if(isEmpty) $(this).remove();
});
Obviously you'll want to adjust the selector to fit your specific needs:
$('td').each(function(){
if ($(this).html() == '') {
$(this).hide();
}
});
$('td:empty').hide();
How about CSS empty-cells
table {
empty-cells: hide;
}
I'm voting for Ballsacian's answer. For some reason,
$('table#myTable tr:not(:has(td:not(:empty)))').hide();
has a bug. If you remove the outermost :not(), it does what you'd expect, but the full expression above crashes jQuery.