Find if a table contains only spaces - javascript

I'm trying to find if a table contains only spaces in each columns. Practically it's an empty table but with spaces. Is it possible with Javascript or jQuery?
<table>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

Yes you can
$("table tr td").text().trim()==""
OR
$("table tr td:empty")
And if you want to do something like hide a the table based on the td emptiness, etc, refer to this post
Another fiddle example

Not a clear question, try this :
$('td').filter(function(){
return $(this).text().search(/^\s*$/) != -1;
}).doWhatYouWantWithThat()

You can use text() and trim() combination, if the trim() give zero length and without trim the length of text is not zero it means table contains spaces.
if($('#tableId').text().length > 0 && $('#tableId').text().trim().length == 0)
{
alert("Empty table with spaces.")
}

I'd suggest:
var cells = $('td'),
allCellsEmpty = cells.length == cells.filter(function(){
return $.trim($(this).text()) == '';
}).length;
JS Fiddle demo.
To hide the table, if its child td elements have no content (other than white-sapce):
$('table').toggle(!allCellsEmpty);
JS Fiddle demo.
References:
filter().
jQuery.trim().
text().

Related

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

Querying a table in Jquery

I have encountered this code
$("#search").keyup(function(){
var val = $.trim(this.value).toLowerCase();
$("table > tbody > tr:gt(0) ").hide();
if(val.length){
$("table > tbody > tr:gt(0) > td").filter(function(){
return this.innerHTML.toLowerCase().indexOf(val) >=0;
}).parent().show();
} else $("table > tbody > tr:gt(0)").show();
});
For Querying a a table in jQuery. here's the HTML markup
<p>
<input id = "search" type = "text">
</p>
<table id ="accounts">
<tr>
<th>Username</th>
<th>Password</th>
</tr>
<tr>
<td>Metasm</td>
<td>password1992</td>
</tr>
<tr>
<td>superadmin</td>
<td>adminpassword</td>
</tr>
<tr>
td>skyrocketeer</td>
<td>thejetsons</td>
</tr>
</table>
Basically it works. but the I am very confused with regards to the jQuery code.
My Question: in this part of code
$("table > tbody > tr:gt(0) > td").filter(function(){
return this.innerHTML.toLowerCase().indexOf(val) >=0;
}).parent().show();
What does this part specifically do? and what does it return?
$("table > tbody > tr:gt(0) > td") - This lines of code states that you want all <td> elements within a <table> element that are in a <tbody> element, who's <tr> element's index is greater than 0 (ie - skip the first row. gt() is simple Greater Than). The > selector states that we only want elements in the first level of children - we don't want to drill down further than the first set of child elements.
The .filter() function will reduce the set of matched elements to those that match the selector or pass the function's test.
The conditional statement here is looking for a certain index of a search string val, within the innerHTML of each element.
this.innerHTML.toLowerCase().indexOf(val) >=0
So what this is saying (remembering that we are iterating over all the elements we found from our first selector) is that we are looking for an occurance of the string val within the innerHTML of the element. The innerHTML is also being passed through the toLowerCase() function, who's name suggests is function - converts all characters to their lowercase form.
Phew...Now after all this we are left with a certain list of elements. Elements that met all of our specifications above. For each of these elements, the code will locate their parent (remember we are talking about <td> elements, so their parents should be <tr>) with the .parent() function and display them on screen with the .show() function.
For the first selector - $("table > tbody > tr:gt(0) > td"), I find sometimes its easier to read it backwards (in your mind) to understand the hierarchy...
Return the -
I'm looking for <td> elements,
that are inside <tr> elements (but not the first one),
that are inside a <tbody> element
that all reside within a <table> element.
Now for some sample input and output.
Given the value of val is "jet", the function would display the last <tr> - the one with the string - thejetsons.
Given the value of val is "password", the function would display the two <tr> elements in the middle. The ones that contain "password1992" and "adminpassword".
I hope this sheds some light on your problem!
$("table > tbody > tr:gt(0) > td") will select all td inside tr:gt(0)... this is a basic jquery selector.
With those td selected, apply a filter based on returned value of the function, if return true, the td will be select.
Then your function: return this.innerHTML.toLowerCase().indexOf(val) >=0 means if the td contains a string (val) will return true, otherwise.
All of this equal to
$("table > tbody > tr:gt(0) > td:contains('"+val+"')").parent().show();
This code select all td elements in all tr elements except first one, then we execute the function for each element as context, if for element the function return false, then it is excluded from jquery 'array', then for all filtered elements we get tr elements in which they are and show them. Into the function we get inner text and search it in search query.

JQuery / Javascript - How to find the index of a table header by the header text

What is a good way to find the index of column by it's display text?
e.g.
<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
...
</tr>
</table>
I would like to have something like
var nameIndex = getColIndex('Name'); // nameIndex = 1
Is there a quick / good way to do it? (Doesn't have to be jQuery, but would be nice)
The following both seem to work, in Chromium 17/Ubuntu 11.04:
$('tr td').filter(
function(){
return $(this).text() == 'Name';
}).index();
JS Fiddle demo.
Or:
$('td:contains("Name")').index();
JS Fiddle demo.
Edited in response to OP's question, in comments, below:
but how do I limit it to the first row?
To limit it to the first row, simply use the :first selector:
$('tr:first td')
Giving:
$('tr:first td').filter(
function(){
return $(this).text() == 'Name';
}).index();
JS Fiddle demo.
References:
:contains().
filter().
:first.
//select the first TR element, then select its children (the TDs),
//then filter them down to only the one that contains a certain string
var theIndex = $('tr').first().children().filter(function () {
return ($(this).text() == 'ID');
}).index();
When passing .filter() a function, if you return true for an index, then it will be kept in the selection, and if you return false then that index will be removed from the selection: http://api.jquery.com/filter
This will limit the search to the first row and give the index of the column with the specified search text (this code used ID).
Note that .index(), when used like above, will return the index of the current selection based on its sibling elements: http://api.jquery.com/index
http://jsfiddle.net/justiceerolin/FdhcV/
$(function(){
$('#search').click(function(){
$('td').each(function(index){
if ($(this).text() == $('#lookup').val()){
console.log(index)
}
});
});
});​

Display jQuery-ui dialog box if <div> is not empty

I have a div block like this:
<div id="myDiv">
<table>
<tbody>
<tr>Some data</tr>
</tbody>
</table>
</div>
All I want to do is check if the <tr></tr> has some text in it and display this div block in a dialog box, otherwise don't do anything.
What would be the best way to do this? I don't know how to check if the <tr></tr> is empty or not.
First of all you have invalid html. The tr tag can contains one or more th or td elements (W3C). So fix your html.
As for validation using jQuery:
if ($('#myDiv table tr td').is(':empty')) {
}
else {
}
http://jsfiddle.net/JnyJs/1/
DEMO
var text = $.trim($('#myDiv').text());
if (text) {
alert(text);
}
You can check the "emptiness" usng jQuery's .text() function:
var $tr = $('#myDiv > table > tbody > tr');
if ($tr.text())
{
// div is not empty
}
else
{
// div is empty
}
You may want to $.trim() the whitespace from the returned string.

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