I've been at this for a while and want to know the best way of achieving my goal if anyone has any ideas!
Example:
<table>
<tbody>
<tr>
<td>Hello</td>
<td>Hello (I want to check this column)</td>
</tr>
<tr>
<td>Hello 2</td>
<td class="active">Hello 2 (this column)</td>
</tr>
</tbody>
</table>
jQuery I've got so far (I'm traversing from a clicked element):
var length = $(self).closest("tbody").find("tr").find("td.active").length;
Obviously this gets all the active classes of td, when I only want the second column. I've tried:
var length = $(self).closest("tbody").find("tr").find("td:eq(1).active").length;
This does not work.
Any ideas?
If I'm understanding correctly, you want to get the table cells in the second column (not the first as indicated in the question) which have the class active on them. If that's the case, you can use the following:
var length = $(self).closest('tbody').find('tr').find('td:eq(1)').filter('.active').length;
http://jsfiddle.net/mikemccaughan/g6mnn/
I think your selector isn't doing what you expect it to. I would have expected what you're expecting, but check out this paragraph from the eq() documentation (emphasis mine):
Note that since JavaScript arrays use 0-based indexing, these
selectors reflect that fact. This is why $('.myclass:eq(1)') selects
the second element in the document with the class myclass, rather than
the first. In contrast, :nth-child(n) uses 1-based indexing to conform
to the CSS specification.
So you're going to want to use td:eq(1) without the class selector, then filter your results, and then count them:
var length = $(self).closest("tbody").find("td:eq(1)").filter(".active").length;
Hope that helps!
Related
I feel like I am asking something really dumb but perhaps it's not my day. If I have a selected element already, e.g:
let tables = $('table');
But now I want to apply another selector like .some-class on top of those tables, but without creating a new jQuery object like this
$('table.some-class')
How would I do it?
You need to use .filter() to adding filter to variable selector.
let tables = $('table');
tables = tables.filter('.some-class');
tables.css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>table</td>
</tr>
</table>
<table class="some-class">
<tr>
<td>table has .some-class</td>
</tr>
</table>
With the following code you would find all elements with class .some-class under the elements with tag name table.
let tables = $('table').find('.some-class');
Of course, it is just for the example, otherwise you can simply do:
let tables = $('table .some-class');
In your question it is not clear if you want children elements or just filter the elements. If you want the tables with a given class, you would do:
let tables = $('table').filter('.some-class');
I have a dynamically generated table, with (currently) a set rule that the first column has to be an unique identifier of some sort. The table is generated based on a json file, altought i don't think that's really important here.
Each table row has a anchor tag added with class="delete". when i click that anchor tag, i execute the following code:
e.preventDefault();
var idCell = $(this).closest('tr').find('td')[0];
If i console.log(idCell),i get <td>01</td> in my console.
If i console.log(typeof idCell) i get object.
If i console.log the type of a random element from the DOM, i get object as well.
My issue is: I cannot get the .val() from idCell, while i can access the .val() from any element directly filtered from the DOM.
My primary concern is why this is(n't) happening, and if there is a fix existing for this type of problem, i would be most gratefull if you would share it with me.
EDIT 1:
Here you have an example table.
<table>
<tr>
<th>
id
</th>
<th>
delete
</th>
</tr>
<tr>
<td>
01
</td>
<th>
delete
</th>
</tr>
</table>
please try to get me the ID of the table, when i click on the delete link, preferably using jQuery.
As JJJ and
Daniel A. White mentioned, The solution is:
1) To use .eq(0) instead of [0] to keep the selector a jQuery element.
2) To use .text() instead of .val() since only input fields have values, and table cells don't.
here's the script (works fine by me)
$(".delete").bind("click",function(e) {
e.preventDefault();
var idCell = $(this).closest('tr').find('td');
idCell.html("");
});
I have some html like the following
<tr>
<td colspan="3">hello</td>
</tr>
<tr class="RowName-Hide-YES" style="">
<td class="form-label-text">Page Tab: </td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">hello</td>
</tr>
<tr class="RowName-Hide-YES" style="">
<td class="form-label-text">Page Tab: </td>
<td></td>
<td></td>
</tr>
What I need to select out all rows of RowName-Hide-YES and hide them along with the previous row. Hiding the ones with the class is easy
dojo.query(".RowName-Hide-YES").style("display","none")
However to try and hide the row and the previous row I was trying to do:
dojo.query(".RowName-Hide-YES").forEach(function(node){node.style.display="none";node.prev().style.display="none"})
But it complains prev() doesn't exist. Can anyone help me out with this one?
Well, the reason the prev() doesn't work is because the forEach() callback passes a DOM node, not a NodeList (which is actually some kind of array with utility functions like prev() on it).
To make it work you have to wrap it inside a dojo.query() again, for example dojo.query(node).prev(). Another issue is that, because of the difference between a nodelist and a node, is that you can't directly apply style.display on it, but you'll have to either use the appropriate NodeList function, for example:
dojo.query(node).prev().style('display', 'none');
Or you have to retrieve the DOM node itself, for example:
dojo.query(node).prev()[0].style.display = 'none';
Also, please note that the prev() API is part of dojo/NodeList-traverse and the style() API is part of dojo/NodeList-dom. You have to include both modules to make it work.
A working example can be found on JSFiddle.
I figured this out. I need to do dojo.query again inside of the forEach to use prev
dojo.query(".RowName-Hide-YES").forEach(function(node){node.style.display="none";dojo.query(node).prev()[0].style.display="none";});
Have you tried just hanging onto it yourself?
var previous = null;
dojo.query(".RowName-Hide-YES").forEach(function(node){
node.style.display="none";
if (previous) {
previous.style.display="none";
}
previous = node;
});
This will help you:
dojo.query(".RowName-Hide-YES").forEach(function(node){ node.closest('tr').style.display="none"; })
I try to get a column number of a td by selecting the td by its class name. But it always returns -1. What is wrong?
js fiddle
HTML
<table >
<tbody>
<tr>
<td >apple</td><td class="current">banana</td><td>cherry</td>
</tr>
</tbody>
JS
console.log($("td.current:first").parent().parent().children().index($(this)));
You can use the variant of .index() that does not take any arguments, to get the index based on its sibling elements
console.log($("td.current:first").index());
Demo: Fiddle
Simply do:
console.log($("td").index($("td.current:first")));
As you have it, $(this) is pointing to the window object, and not the scope you think it is, which has not been defined in the context of the call.
Also note that index() works thusly: collection.index(member).
you don't neet to get parent then parent, Simply do this
$("td.current:first").index();
I've three predefined class for <tr class="dynamicCSS"> tag. Those classes shall come one after another. Like -
<tr>
<td></td>
</tr>
<tr class="dynamicCSS"> //classA
<td></td>
</tr>
<tr class="dynamicCSS"> //classB
<td></td>
</tr>
<tr class="dynamicCSS"> //classC
<td></td>
</tr>
<tr class="dynamicCSS"> //repeat the above
<td></td>
</tr>
How can i do it?
You need some way of identifying the rows you want to add the classes to. (You can't use the same id value over and over again as you have in your question, so that won't work, but you could give them different id values.)
Once you have a way of identifying the tr elements in question, it's just a matter of setting the className property of those elements.
For instance, in your example you've identified the second, third, and fourth rows in the table. Assuming the table has the id "myTable", you can get the table's rows from its rows property, which is an HTMLCollection you can index into starting with 0:
var table = document.getElementById("myTable");
table.rows[1].className = "classA"; // second row
table.rows[2].className = "classB"; // third row
table.rows[3].className = "classC"; // fourth row
Note that that will wipe out any previous class the rows had. If you want to add a class, use += " classX" (note the space):
var table = document.getElementById("myTable");
table.rows[1].className += " classA"; // second row
table.rows[2].className += " classB"; // third row
table.rows[3].className += " classC"; // fourth row
In the above I've restricted myself to DOM functions that are present in just about all browsers, even older ones. On all major current browsers, rather than getElementById and the rows collection, you can use querySelector with any valid CSS selector expression that will identify the row you want to add a class to. You don't need it, necessarily, for what you've described, but it's good to know about it (and its cousin querySelectorAll, which returns a list of matching elements whereas querySelector returns just the first matching element).
Maybe you are looking for the nth:child css selector *1
For your example you can fiddle with it here:
http://jsfiddle.net/95N4E/
.myTable tr:nth-child(3n+1) {
background-color: gray;
}
.myTable tr:nth-child(3n+2) {
background-color: limegreen;
}
.myTable tr:nth-child(3n+3) {
background-color: steelblue;
}
And read how it works here:
*1 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
A simple way to add classes to tr elements would be to use jQuery.addClass():
jQuery("tr").addClass("myClass");
The selector passed into the jQuery call can also select nth children, for example to add a class to every third tr element:
jQuery("tr:nth-child(3n)").addClass("classC");