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"; })
Related
I trying to a class to my html page with jquery, here is my code.
<tbody>
<tr>
<td class="itmId">1</td>
<td class="entryNAmee">David</td>
</tr>
<tr>
<td class="itmId">2</td>
<td class="entryNamee">Alan</td>
</tr>
</tbody>
I am changing the td to input text with jquery on clicking in the every td except 1st column. that is working fine and when the above event perform the tr become like below.
<tr>
<td class="itmId">1</td>
<td class="entryNAmee nowText">
<input type="text" value="Alan">
</td>
</tr>
After making corrections an event working in blur. code is below.
js.
$(document).on('blur','table tr td input',function()
{
var fieldNewValue = $(this).val();
var fieldNewId = $(this).closest('td.itmId').addClass("kkkkkkkkk");
//console.log(fieldNewId);
alert(fieldNewId);
/*$.ajax({
typr:"post",
url:"updateEntry",
dataType:'json',
data:{newValue:fieldNewValue},
success:function(data)
{
console.log("updated succesfully");
}
});
*/
$(this).parents('td').text(fieldNewValue).removeClass('nowText');
$(this).remove();
});
I Want to add a class to the upper td of the the clicked td.
I tried the closest and parents jquery api's, But didnt work,
Anyone can please support me to how to catch the td ?
Also what are the different between closest and parents in jquery.
Thanks
Change:
var fieldNewId = $(this).closest('td.itmId').addClass("kkkkkkkkk");
to:
var fieldNewId = $(this).closest('tr').find('td.itmId').addClass("kkkkkkkkk");
You can read the docs to see the differences between .closest() and .parents(), however in your code you weren't traversing far enough up the DOM. $(this).closest('td.itmId') was looking for a td that didn't exist where you expected it to since it's a sibling of the parent cell that you were in.
You could also use (this).closest('td').prev() instead of (this).closest('tr').find('td.itmId')
There is also .prev in jQuery which returns the "upper" or better previous element in current context. It works just like this:
$(this).prev().addClass('kkkkkkkkk')
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 have a table, where each tr and td have only classes, I have a problem with selection of td element having the class I need
HTML:
<table>
<tr class="data">
<td class="cell">1</td>
<td class="cell2"></td>
</tr>
<tr class="data">
<td class="cell">2</td>
<td class="cell2"></td>
</tr>
</table>
When mouseover td with class="cell" I have to get text between td on which my mouse and do something with this. This should be done with pure JavaScript, without frameworks. I tried:
var cell = document.querySelector('.cell');
function callback(){ //do something }
cell.addEventListener('mouseover',callback(),false);
It doesn't work, or maybe I did mistakes?
The following will only select the first element with class='cell'.
document.querySelector('.cell');
For adding event listener to all such elements, use querySelectorAll(),
which will return a NodeList (a kind of array of inactive DOM elements) having class='cell'. You need to iterate over it or access specific element using it's index.
For example:
var cells = document.querySelectorAll('.cell');
cells.forEach(cell => cell.addEventListener('mouseover', callback, false));
Check this fiddle
I would rather use event delegation for this.
document.getElementById('your-table').addEventListener('mouseover', function (e) {
var t = e.target;
if (t.classList.contains('cell')) {
console.log(t.textContent);
}
});
However "It doesen't work, or maybe I did mistakes?"
querySelector returns a single element.
cell.addEventListener('mouseover',callback(), here callback() calls the callback function right away and that's not what you want. You want to pass the function reference so remove the ().
Note that even if you use querySelectorAll which returns a node list, it doesn't implement the Composite pattern so you cannot treat a list as a single element like you would do with a jQuery object.
Most modern js environments now support for...of iteration, so you can now do this like:
for (var cell of document.querySelectorAll('.cell')) {
cell.addEventListener('mouseover',callback,false);
}
This might even work in a single line:
document.querySelectorAll('.cell').map(cell=>cell.addEventListener('mouseover', callback, false));
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!
I have the following (repeating) html:
<tr>
<td>Some text</td>
<td><a href="#">Click me<a/></td>
<td><form><input type="hidden" value="4"/></form></td>
</tr>
Using jQuery on the click event of the link I want to retrieve the value of the input element. I have tried all kinds of parents(), children(), nextAll(), prev() combinations but I can not get the value of the input element.
Here is a link to my testing functions. jsFiddle Link
Additionally how would i retrieve the text of the first td element?
Thanks a lot for helping me achieve this.
Michael
You can use parent to get to the td from the a, then next to get to the following td, and then find to get to the input element:
$("a").click(function() {
var value = $(this).parent().next().find("input").val();
});
Here's an updated fiddle.
To get the text from the first td you can take pretty much the same approach, but use prev instead of next.
Also, seeing as you have several repetitions of the HTML snippet, it's probably going to be more efficient to bind the click event handler higher up the DOM tree (maybe you already are, you haven't posted any JS so I don't know):
$("table").on("click", "a", function() {
//Do stuff
});
My usual approach to these things is to use closest to go back to some common container and then find to come back down:
$('a').click(function() {
var $input = $(this).closest('tr').find('input');
// Do something with $input.val()
});
Demo: http://jsfiddle.net/ambiguous/Zh6Zk/
The closest/find approach withstands DOM structure changes fairly well so you don't have to worry that much about moving things around in your HTML.
it will give you the input value
$(document).ready(function(e) {
$('.myAnchor').click(function(e){
var parentNode = $(this).parent();
var valueOfInput = $(parentNode).next().children('input').val();
alert(valueOfInput);
});
});
html:
<form>
<table>
<tr>
<td>Some text</td>
<td>Click me</td>
<td><input type=hidden value="4"/></td>
</tr>
</table>
</form>