CSS selector combine with And operation '&&' - javascript

I am trying to use querySelectorAll() to get each 'td' element that have align attribute && is child of 'tr'
this works :
document.querySelectorAll('tr>td');
and this works :
document.querySelectorAll('[align]');
but how to combine them ?

Preface: There's no point whatsoever to tr> in front of td: The only valid parent element for a td is a tr. So I've left that off below.
That depends on what you want to do.
If you only want td elements with an align attribute:
document.querySelectorAll("td[align]")
Or only td elements that are children of tr elements that have an align attribute
document.querySelectorAll("tr[align]>td")
Or only elements with an align attribute that are children of td elements:
document.querySelectorAll("td[align]")
Or only elements with an align attribute that are descendants (not necessarily direct children) of td elements:
document.querySelectorAll("td [align]")
...and so on; full details in the spec.
Re your comment below:
It works, but is there a way to not select the first td from each tr ?
There's nothing about that in your question.
You could use td:not(:nth-child(0)) which means "a td that is not the first child of its parent" provided that you never have a script element as the first child of a tr (which is valid, but an odd thing to do). With that proviso, it works, because only td and script are valid children for tr.
Or you could just punt and select all the relevant tds and then:
var list = Array.prototype.slice.call(document.querySelector("whatever"), 1);
...which will give you an array skipping the first entry in the list returned by querySelectorAll.
Re your further comment:
tr[style]>td[align]:not(:nth-child(0)) returned 550 node lists which is the same as tr[style]>td[align]
Right. Again, :nth-child looks to see what child it is, not where it falls in the list chosen by the previous selector.
If you want to skip the first td in each row, and you want to ignore tr that don't have a style attribute, it's more complicated:
var result = Array.prototype.reduce.call(
document.querySelectorAll("tr[style]"),
function(list, row) {
list.push.call(
list,
Array.prototype.slice.call(row.querySelectorAll("tr[align]"), 1)
);
return list;
},
[]
);

You can combine selectors the same way as in CSS, like:
document.querySelectorAll('tr>td[align]');
If you haven't nested tables, it's the as document.querySelectorAll('td[align]');.

Combine them like this:
document.querySelectorAll('tr>td[align]');
More info: CSS Attribute Selectors
Note: <td> is only permitted as a child of <tr> anyway.

Related

Wrap the id of list item and save it in table td

I have a list of items inside table cells, in each cell I have a list item.
What I want?
When I save the table I want to save the id of each list item into the cell that the list item inside it.
Like this:
<td><li id='itemID'>contents</li></td>
and I want to save this:
<td>itemID</td>
Any way to do that?
Use .find() and .attr() as shown below.
$("td").each(function(){
$(this).text($(this).find('li').attr('id'));
});
Fiddle
An important point to note is that your HTML is invalid. You cannot have an li element as a child of a td, it must be contained in either an ul or ol.
Once you've fixed that you can provide a function to text() which you call on the td. You can then traverse the DOM and return the id of the child li - assuming there is only one, or you only want to read the id of the first one found:
$('td').text(function() {
return $(this).find('li').prop('id');
});

Get children without subchildren

In HTML I have tables in tables.
So I have for example a table in a td element.
However when getting all td's for the closest row :
var row = $(this).closest('tr').find('td');
I am getting all the subchildren also (all td elements in the child table).
How you get all childs without sub elements ?
Thanks in advance
Did you try $(this).closest('tr').find('>td');
The > only select direct descendants (first level children)
You can use children():
var row = $(this).closest('tr').children('td');
Or alternatively include the direct descendant selector when using find():
var row = $(this).closest('tr').find('> td');

jQuery: Style all empty child TDs only if the first (:first) TD contains no text (:empty)

I need some jquery code to style all empty child tds only if the first td contains no text.
Right now my code styles all empty TDs as a greyish color (see image).
I only want the first row to be styled because the first TD contains text. In other words, I need to test if the first TD contains text and if so, add the grayish color on that row, if it is blank then don't add the coloring to the empty TDs.
jsbin for the above code:
http://jsbin.com/ojemuf/1/edit
Select rows, check if first child not is empty, get its matching siblings:
$('tr td:first-child:empty').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
$('tr td:first-child:not(:empty)').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
Apparently I had it backwards!
I hope I'm understanding your question right
loop trough the tr elements and if the first is not empty add a color to the empty td's inside the tr element
$('tr').each(function () {
if(!$(this).find('td').first().is(':empty'))
$(this).find('td:empty').css('background', '#ccc');
});
--- edit ---
Reversed edition of Mathletics
$('tr td:first-child').not(':empty').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
The question is a bit unclear whether you want to update the entire table when the first element is not empty or if you want to update every matching row. For the entire table, you can try this:
$("td:first:not(:empty)")
.closest("table")
.find("td[class*='_crew']:empty")
.css("background", "#DDCEC0");
From the description, it seems the other answers missed the fact that he wants this applied when the first element is NOT empty.

How to remove entire tr when a keyword is contained within a specific td

Inside a number of <tr>'s in my document there are 7 classes, each one sometimes has a corresponding class name (i.e. sub, id, assigned, sub, sub, status, and one classless "td"). Within the td class = "status" lies a span class defined as either
<span class = "statusBox">Passed</span>
or
<span class = "statusBox">Failed</span>.
If the text contained within the span class is "Passed", I need to delete the entire <tr>. If it's failed it stays on the document. How can I achieve this?
My first attempt was through a call such as:
function() {
if ($('tr td span.statusBox').html() == "Passed"){
$('tr td span.statusBox').hide();
}
But this removed every instance of only the phrase "Passed", not the entire <tr>.
I've also tried
$("tr td span.statusBox:contains('Passed')").each(function(){
$(this).css("visibility","hidden");
});
I feel like this is more along the right path, but I can't seem to get it to work.
You were close: find the status box with the word 'Passed' and then find the closest ancestor tr element and remove it from the DOM:
$("tr td span.statusBox").filter(":contains('Passed')").each(function(){
$(this).closest('tr').remove();
});
Since the :contains operator is a jQuery extension (it has been deprecated from the CSS spec), it's faster to break the selector into two parts. The first is finding all spans of class statusBox, this will look up the elements using native browser methods. Then those elements are filtered using the :contains operator (which may have a native implementation or may be implemented in jQuery, depending on the browser).
It is because you are altering the visibility of the span instead of the parent <tr>. You can use $(this).closest('tr') to get to the row element and then alter its visibility.
$("tr td span.statusBox:contains('Passed')").each(function(){
$(this).closest('tr').css("visibility","hidden");
});
$(".statusBox").each(function (i, e) {
if ($(e).text() == "Passed") {
$(e).closest('tr').hide();
}
});
http://jsfiddle.net/B7Wqy/

jQuery: find next table-row

I have a table, containing rows, contaning cells - and some of them contain an img as follows:
<img id="FormView1_btnSave_row1%1%new" style="border-width: 0px; cursor: pointer;"
src="grafik/ok_16x16.gif" onclick="cleverStuff(this)"/>
In the function cleverStuff I would like to operate on the line that follows the line in which the button was clicked - this special button is contained in the last visible line only, there are a bunch of hidden lines below and I want to make the first hidden line visible - but I fail at getting to the next line.
My understanding was that all combination of parent() and next() could be used to get from the img to the td, to the tr and finally to the next tr.
So I tried to verify this:
$(ctrl).attr('id') correctly returns the img's id :)
$(ctrl).parent().attr('id') returns NULL.
What am I missing here?
This should give you the enclosing tr of the element, even if it isn't the element's direct parent, then that row's next row. if you use parent on an element that is inside a td, it will give you the column, not the row. Supplying a filter to the parent() method will simply filter out the parent unless it happens to match the filter, typically resulting in no matching elements. Closest is probably what you want, but parents('tr') might be needed if you have nested tables and want the outer row instead of the inner row.
$(this).closest('tr').next('tr')
You don't show us enough HTML really but this should work:
$(ctrl).parent('tr').next();
Maybe the parent element didn't have its id set? To get to the next row from the image I believe you can do:
$(this).parent('tr').next('tr')
I hope u can use
jQuery(this).parents('tr');

Categories

Resources