Select element if contains text - javascript

I can't get this one to work and I can't find any similar question that does the same what I want.
I have a table with rows like this:
<div class="gui-table">
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><p class="customfields">Size</p></td>
<td></td>
</tr>
//etc...
I want to check if all the second cells have the text "size" in it! If so then hide the third td.
So what I thought what would work is this:
$('.gui-table tr').each(function(){
if ($('td:nth-child(2) .customfields:contains("Size")').length > 0) {
$(this).css('visibillity', 'hidden');
}
});
This doesn't work! Does anybody see what is wrong with this?

Just do:
$('.gui-table .customfields:contains("Size")').css('visibility', 'hidden');
Fiddle: http://jsfiddle.net/cfmrngcc/2/

Assuming I understand your question correctly the following should do it:
$('.gui-table p.customfields:contains("Size")').parent().next().hide();
td { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gui-table">
<table>
<tr>
<td></td>
<td></td>
<td>Shown</td>
</tr>
<tr>
<td></td>
<td><p class="customfields">Size</p></td>
<td>Hidden</td>
</tr>
</table>
</div>
This will hide the next table cell after any table cell containing a p tag with the text Size.
It works by finding the P tags containing size inside the gui-table - $('.gui-table p.customfields:contains("Size")')
Then using .parent() to select it's parent table cell.
And finally .next() and .hide() to select the next table cell and hide it.

I banged around on this and came up with this JSFiddle that should get you going again. The essential function is much like you started with but modified like this:
function doItNow(e)
{
$('.gui-table tr').each(function ()
{
$('td:nth-child(2) .customfields:contains("Size")').each(function ()
{
$(this).parents('tr').children('td:nth-child(3)').css('visibility', 'hidden');
});
});
}
Note that the inner each() is passing the paragraph element and not the cell element. So I traversed up the parents() chain until I find the row and hide the 3rd child. You might be able to code this without the inner each but I am too lazy to be that complicated!

If you only want to hide the third column, when there is the word 'size' in the second one you can do this in that way:
$('.gui-table td:nth-child(2):contains("Size")').next().css('visibility', 'hidden');
Here is a jsfiddle:
http://jsfiddle.net/0qczvak5/
The explanation:
Select all elements with the class name .gui-table, select all second tds with td:nth-child(2), filter them with :contains("Size"). Now you have all second tds with the word "Size" and with .next() you get the following cell (the third one) and you hide it with .css('visibility', 'hidden').

$(".gui-table tr td:nth-child(2)").each(
function (index,tag){
if ($(tag).find("p").text() == "Size")
$(tag).css('visibility', 'hidden');
}
)
This is will work .

Related

jQuery How to hide all span containing td in a table

I have some rows in a table like the code below and I want after some seconds to hide the contents of td's (i have filled them with text in a loop).
My sample code is this
setTimeout(function() {
$('span').each(function(index, el) {
$(this).hide();//nothing happens
});
}, 5000);
<tr>
<span class="myspan"><td></td></span>
<span class="myspan"><td></td></span>
<span class="myspan"><td></td></span>
<span class="myspan"><td></td></span>
</tr>
I tried using other ways too, like saving all spans to an array, or selecting the class and hiding it.
var arr=$('span');
for (var i=0;i<arr.length;i++){
arr[i].css('visibility','hidden');
}
but same thing happened. I want to be able to show and hide the contents of td's when it's needed without hiding the border if it is possible
you can just use any element in td tag from table.
otherwise browser convert your code to valid code.
output your HTML is like that in browser:
<body>
<span class="myspan"></span>
<span class="myspan"></span>
<span class="myspan"></span>
<span class="myspan"></span>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
you select span but there is no more td in your target span. SO your delect is false.
you have to change yor HTML:
<tr>
<td><span class="myspan"></span></td>
<td><span class="myspan"></span></td>
<td><span class="myspan"></span></td>
<td><span class="myspan"></span></td>
</tr>
now you can select it and do your function:
var arr=$('span');
arr.css('visibility','hidden');
or
var arr=$('span');
arr.hide();
later show yor it:
att.show();
you dont need for or any loop. just select your target and say ehat do you want to do. JQuery do it for each on in your selector (exactly like a loop)
To hide all after 5 seconds, you can use the following code
setTimeout(function() {
$('table tr span').hide(5000);
}, 5000);
or
setTimeout(function() {
$('table tr span').css('visibility','hidden');
}, 5000);

getting nth-child of parent

I have a table where I need the first two cells of every row clickable (NOT the entire row). When I click the first or the seccond cell, I want to get the value of the third cell of that same row.
To clarify, when I press a1 I want the alert to show c1, If I press b2 I want it to show c2 and If I press c3 I dont want anything to happen.
As you can see, my alert($(this).parent(':nth-child(3)').text()); doesn't work.. how can I achieve this?
$('td:nth-child(-n+2)').on("click", function(){
alert($(this).parent(':nth-child(3)').text()); //Doesn't work
});
td{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
</tr>
</table>
you need to use .closest('tr') .. to select parent tr and .find() to select td:nth-child(3)
$('td:nth-child(-n+2)').on("click", function(){
alert($(this).closest('tr').find('td:nth-child(3)').text());
});
Working Demo
Use this
$(this).parent().children(':nth-child(3)').text()
Select the parent and then a child of it.
JsFiddle
You can use
$('td:lt(2)').on("click", function () {
alert($(this).parent().find("td:eq(2)").text()); //Doesn't work
});
Fiddle
lt(2) will get the specified elements whose index is less than 2
eq(2) will select the element whose index is equal to 2
This work for me:
$('table tr').each(function(){
$(this).find('td:lt(2)').on("click", function () {
var text = $(this).parent().find("td:eq(2)").text();
console.log(text);
});
});

Jquery-Delete all the row if first td of row does not have the id with given value

I have a table with many rows. from which i want to delete all the rows except the row, of which first td has a given id.
i am in half way
<tr>
<td id="1" class="td_link" onclick="viewPointDetails(1)">Barrackpur</td>
<td class="td_link" id="11" class="edit_client" onclick="editPoint(1)">India</td>
</tr>
<tr>
<td id="2" class="td_link" onclick="viewPointDetails(2)">Madiwala</td>
<td class="td_link" id="11" class="edit_client" onclick="editPoint(1)">India</td>
</tr>
​
and my jquery;
$('tr').each(function () {
if first td does not have given id say 1 then delete this row.
});
my First row is header. so i dont want this to be checked(do not want this row to be deleted).
You should be able to achieve this without the each loop:
$("tr:not(:has(#1))").remove();
This uses the :has selector to return rows which contain an element matching the selector. It uses the :not selector to get the opposite of that (so you end up with all rows that do not contain an element matching the selector), and then uses remove to remove all elements in the matched set.
Try this
$(document).ready(function () {
$('tr').each(function () {
if($(this).find("td:first").attr("id") == 2)
{
$(this).remove();
}
});
});

Check a table row cell for contents

I want to use jQuery to check if the 2nd cell in each table row of a table contains any text, if the 2nd cell doesn't contain any text then set the table row to display: none;
Whats the best way to go about this?
HTML:
<table id="results">
<tr>
<td>Results</td>
<td>1000</td>
</tr>
<tr>
<td>Description</td>
<td></td> <!-- This cell is empty so hide row -->
</tr>
<tr>
<td>Time/Date</td>
<td>14:03 22/01/12</td>
</tr>
</table>
Have a look at the :empty selector:
$('table tr').has('td:empty:nth-child(2)').hide()
$('table tr').each(function() {
if(!$(this).find('td').eq(1).html().length) {
$(this).hide();
}
});
This will loop through each tr, find the second element using $.eq(1) (arrays start from zero) and see if it contains anything using $.html().length. If it's empty, it hides the tr with $(this).hide().
a simple solution, make use of :empty selector
$("#results tr").find('td:eq(1):empty').parent().hide();
fiddle : http://jsfiddle.net/GHg7f/2/

jquery remove table row

I'm having a problem removing a table row, I can highlight the row red but when I try to remove it the slideup function messes up. I have wrapped them in a div but I don't no how to access the children of the tr and then the children of that?
$('#test tr:not(:first)').click(function()
{
$(this).css("background-color","red");
$(this).children("td div").slideUp(function()
{
$(this).parent().remove();
});
});
The problem is this line:
$(this).children("td div").slideUp(function()
I also tried
$(this).children("td").children("div").slideUp(function()
The slide up only removes the first column.
<table border="1" width="600" cellspacing="0" cellpadding="0" id="test">
<tr>
<td><b>First Name</b></td>
<td><b>Last Name</b></td>
<td><b>Address</b></td>
<td><b>Town</b></td>
</tr>
<tr>
<td><div>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>Town</div></td>
</tr>
</table>
Do I need to wrap the content of each <td> with a div tag?
Thanks
Calling children("td div") will find all direct children that match the selector. (all children which are <div>s that happen to be inside of <td>s)
Since all of the direct children are <td>s, it won't match anything.
Calling children("td").children("div") will find all <div>s inside of all <td>s.
It will thus find the only <div> you have there.
EDIT: You can use jQuery to create wrapper elements; see my blog post:
$('#test tr:not(:first)').click(function() {
$(this).css("background-color","red");
$(this).children().wrapInner('<div>').children().slideUp(function() {
$(this).closest('tr').remove();
});
});
Demo

Categories