Menu
I'd like to check for empty TDs (classes a-h only) and if all are empty, then I'd like to hide the parent TR. The issues I'm running into are, my empty TDs contain " " I'm not sure how to test for those?
http://jsfiddle.net/FeQ7h/1/
<table>
<tr>
<td class="requirementRight">Requirement</td>
<td class="a"> </td>
<td class="b"> </td>
<td class="c"> </td>
<td class="d"> </td>
<td class="e"> </td>
<td class="f">NOT EMPTY</td>
<td class="g"> </td>
<td class="h"> </td>
</tr>
<tr>
<td class="requirementRight">Requirement</td>
<td class="a"> </td>
<td class="b"> </td>
<td class="c"> </td>
<td class="d"> </td>
<td class="e"> </td>
<td class="f"> </td>
<td class="g"> </td>
<td class="h"> </td>
</tr>
if ( $('td.a:empty, td.b:empty, td.c:empty, td.d:empty, td.e:empty, td.f:empty, td.g:empty, td.h:empty') ) {
// hide the parent tr
}
881
To hide table rows, iterate through all the td element and check it's text. If it is empty then hide it's parent (which is tr) using . hide().
Method 1: Using the “:empty” selector: The element to be checked using is() method. The is() method is used to check if one of the selected elements matches to the selector element. This method can be used on this element to test if it is empty by using “:empty” selector.
Use . hide() method of jQuery to hide it as you just need to hide it.
The empty() method removes all child nodes and content from the selected elements. Note: This method does not remove the element itself, or its attributes. Tip: To remove the elements without removing data and events, use the detach() method. Tip: To remove the elements and its data and events, use the remove() method.
"If Empty" is not clear, since in your example, they are filled with "nbsp". This is the reason why I made a function called isEmpty() so you can define your custom rules in there. Since you didn't want requirementRight, I put td:not(.requirementRight). This is not the correct way to do it.
The correct way to do it, would be to put a second class on a-h, such as
<tr>
<td class="requirementRight">Requirement</td>
<td class="checkempty a"> </td>
<td class="checkempty b"> </td>
<td class="checkempty c"> </td>
<td class="checkempty d"> </td>
<td class="checkempty e"> </td>
<td class="checkempty f">NOT EMPTY</td>
<td class="checkempty g"> </td>
<td class="checkempty h"> </td>
</tr>
So we can call tr.find(tr.checkempty)..
Anyway, here's the code!
$("tr").each(function() {
var trIsEmpty = true;
var tr = $(this);
tr.find("td:not(.requirementRight)").each(function() {
td = $(this);
if (isEmpty(td) === false) {
trIsEmpty = false;
}
});
if (trIsEmpty == true) {
tr.hide();
}
});
function isEmpty(td) {
if (td.text == '' || td.text() == ' ' || td.html() == ' ' || td.is(":not(:visible)")) {
return true;
}
return false;
}
Working Example: http://jsfiddle.net/FeQ7h/7/
88
This is what you are looking for:
$(function(){
$('tr').each(function(){
var _hide = true;
$(this).find('td:not(.requirementRight)').each(function(){
if($(this).text().trim() != ''){
_hide = false;
}
});
if(_hide){
$(this).hide();
}
});
})
You check every row for content other than whitespace and hide the row if none was found. have fun! working example: http://jsfiddle.net/kvCXa/7/
4
firstly, I'd suggest giving the TDs an additional class to distinguish the TDs whose contents are to be checked. below, I used .et (emptyTest).
the following syntax might be slightly wrong, but it should give you the idea:
$("tr").each(function() {
var nonEmpty = $(this).find("td.et").filter(function() {
return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
});
if (nonEmpty.length == 0) $(this).hide();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
