Select all cells in nth column with jQuery - javascript

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
});

Related

Table columns collapsed in Javascript

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!

jquery select all rows not containing specific text

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');
});

How to get partcular td in tr in jqGrid?

I have tr by this $('#' + rowid)
and all tds by this $('#' + rowid).find("td")
but how to find a single td? not all.
Try using getCell('row_id', 'column_index') method.
See documentation here
[EDIT]
By native Javascript;
var row = document.getElementById('row_id');
var cell = row.cells[cell_index]; //cell_index will be integer starting with 0
/*
do whatever you want with cell
*/
You may use
.children(':first')
OR
index()
OR
find("td :first")

How to use jQuery to dynamically update IDs after cloning a table row?

When triggered, the 3rd (bottom) row of a table is cloned. In the CSS, this row (#tr3) is set to: display:none; Here is the table row I am cloning:
<tr name="tr3" id="tr3">
<td><input type="text" name="dt1" id="dt1"></td>
<td><input type="text" name="fn1" id="fn1"></td>
<td>change</td>
<td>delete</td>
</tr>
This is the JQuery code to clone the row. Not mine, sadly, so I don't understand all of it.
$("table tr:nth-child(4)").clone().find("input").each(function() {
$(this).val('').attr('id', function(_, id) {
return id + count;
});
Specifically, how does the function in line 2 work - what is the underscore?
Here's what I came for, though. How can I:
change the style to display:block for cloned rows, and
update the ids of the anchor tags in the cloned rows. The IDs of the input fields Do update (e.g. fn1 => fn11, fn12, fn13, fn14, etc).
Thank you.
Just for clarity:
var $clone = $("table tr:nth-child(4)").clone();
How to change the style to display:block for cloned rows?
$clone.show();
How to update the ids of the anchor tags in the cloned rows.
$clone.find("a, input").each(function() {
$(this).val('').attr('id', function(_, id) {
return id + count;
});
});
In the jQuery code above, how does the function in line 2 work - what is the underscore?
The underscore (_) is a valid ECMAScript's identifier name and it is used simply as a placeholder to be able to grab the second argument (id.)
And everything altogether (untested.)
$("table tr:nth-child(4)")
.clone()
.show()
.find("a, input").each(function() {
$(this).val('').attr('id', function(_, id) {
return id + count;
});
});
You never actually access the cloned row on its own. You would have to assign it to something, e.g.
$clonedRow = $("table ...").clone();
then you can run all of the other methods and finally append $clonedRow to the DOM, possibly with
$clonedRow.insertAfter("table ...")
You need to somehow strip off the last digit(s), possibly with a regex:
return id.replace(/\d+$/, '') + count;
The _ is just a placeholder. It's not used, so the writer of the code chose a nondescript variable name since something is required in the declaration to get at the id parameter.

Is that possible to select all elements that does not match a selector?

I have a table with lots of rows.
I would like to select all rows that does not match some selector.
For example:
$('#my_table tr').each(function() {
if ($(this).find(".class_a.class_b[my_param='" + my_value + "']").length > 0) {
$(this).do_something();
}
});
Is that possible to do the same in easier way ?
Have a look at jQuery's :not()-selector. It excludes elements from the current selection set.
$('#my_table tr').not('.class_a').each(function(){
// do something
}
);
the above code will select all rows that are in table with ID='my_table' and whose classname is not 'class_a' . Is this what you needed ?

Categories