Hide entire <tr> if child's child - javascript

I have a table like this
$('td:contains("label label-primary")').parent().hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-primary">
HIDE
</span>
</a>
</td>
</tr>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-danger">
SHOW
</span>
</a>
</td>
</tr>
</tbody>
I just want to be able to hide the table rows in which the span deep inside the tr has a specific class. In this case, label label-primary.
However, this does not seem to work. It hides nothing.
I am using this on tampermonkey to edit a webpage whose code I do not have edition access.
What am I doing wrong?

:contains() selects all elements that contain the specified text. You want to use find() (https://api.jquery.com/find/) or :has() https://api.jquery.com/has-selector/ to select based on a selector. You also have to write ".label.label-primary" to indicate they are classes.
$('td:has(.label.label-primary)').parent().hide();
OR
$('td').find('.label.label-primary').parent().hide();

Try this:
$('span').hasClass('label label-primary').parents('tr:first').hide();

Use jQuery :has() pseudo-class selector to check element contains at least one element that matches the specified selector. Or use has() method to filter out elements.
$('td:has(".label.label-primary")').parent().hide();
// or
$('tr:has("td .label.label-primary")').hide();
// or using has method
$('tr').has("td .label.label-primary").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-primary">
ble> HIDE
</span>
</a>
</td>
</tr>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-danger">
SHOW
</span>
</a>
</td>
</tr>
</tbody>
</table>

Here a one liner solution, hope it helps:
$("tr > td > a").find("span[class*='label label-primary']").closest("tr").hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-primary">
HIDE
</span>
</a>
</td>
</tr>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-danger">
SHOW
</span>
</a>
</td>
</tr>
</table>
</body>

May I suggest you this jquery script?
$('td').find(".label.label-primary").closest('tr').hide();

Try this..
$(".table td").filter(function() {
return $('span', this).hasClass('label.label-primary');
}).hide();

Here you go with a solution
$('table tr').each(function(){
$(this).find('span[class="label label-primary"]').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-primary">
HIDE
</span>
</a>
</td>
</tr>
<tr>
<td>
<a class="pums" rel="tooltip">
<span class="label label-danger">
SHOW
</span>
</a>
</td>
</tr>
</table>
</body>
Just loop through all the tr & then find span with specific class.
Hope this will help you.

Related

Remove all element that does not have specific descendandt element in jquery

So i have the following markup:
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount"></span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
there are multiple tr elements, but only some of them have the innermost span with "woocommerce-Price-amount" class. The other have nothing after the "festi-cart-product-price" classed span.
I'm trying to remove all the tr elements that does NOT have the "woocommerce-Price-amount" span inside it using jQuery.
jQuery( document ).ajaxComplete(function() {
jQuery(".festi-cart-product-price:not(:has(>span))").each(function(){
jQuery(this).parent('tr.festi-cart.item').hide();
});
});
I've been trying to use the :not selector, but it doesnt seem to produce anything. I'm really not sure where it goes wrong.
Can any of you spot where my code is going wrong, or if it's a completely hopeless approach to a simple solution?
Use .filter function to match elements with specific requirements.
Use $('tr').find('.woocommerce-Price-amount').length > 0 to check if element exists in tr.
Than simply do .hide() (or .remove()) to filtered elements.
$(document).ready(function() {
var hasWoo = $('.festi-cart-list tr').filter(function() {
return $(this).find('.woocommerce-Price-amount').length !== 0;
});
hasWoo.hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">WOO</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">WOO</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
EMPTY
</span>
</td>
</tr>
</tbody>
</table>
</div>
You need to use .closest() method of jquery instead of .parent() method.
$('.btn').click(function(){
$('.festi-cart-item').each(function(){
var price = $(this).find('.festi-cart-product-price').children().hasClass('woocommerce-Price-amount');
if(!price)
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount"></span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn">remove</button>
You're so close, your selector is valid and select the festi-cart-product-price that have no span's :
$(".festi-cart-product-price:not(:has('>span'))")
You've just to go up to the parents tr using closest() then hide them :
selector.closest('tr').hide();
Check This fiddle using setTimeout() to see the effect .
Hope this helps.
$(function() {
var selector = $(".festi-cart-product-price:not(:has('>span'))");
selector.closest('tr').hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list" border=1>
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 1
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">p1</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 2
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 3
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 4
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">p4</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
How about this.
$("tr:not(:has(>.woocommerce-Price-amount))").hide()
Not tested.
Comes from this question: How to select elements which do not have a specific child element with JQuery which is worth a read on this type of 'descendant without feature' question.

How to insert a scroll bar to a dev class

I want to add a scroll bar to the drop-down list of my code.It is actually a cart which shows the items in the cart when I click on the cart. I want to put a scroll bar to it to go down and see the items on it as the drop down box has a fixed size.
The code I used for the cart is:
<ul id="cart-dropdown" class="box-dropdown parent-arrow">
<li>
<div class="box-wrapper parent-border">
<p>Recently added item(s)</p>
<table class="cart-table">
<tr>
<td><img src="img/products/sample1.jpg" alt="product"></td>
<td>
<h6>Lorem ipsum dolor</h6>
<p>Product code PSBJ3</p>
</td>
<td>
<span class="quantity"><span class="light">1 x</span> $79.00</span>
Remove
</td>
</tr>
<tr>
<td><img src="img/products/sample1.jpg" alt="product"></td>
<td>
<h6>Lorem ipsum dolor</h6>
<p>Product code PSBJ3</p>
</td>
<td>
<span class="quantity"><span class="light">1 x</span> $79.00</span>
Remove
</td>
</tr>
<tr>
<td><img src="img/products/sample1.jpg" alt="product"></td>
<td>
<h6>Lorem ipsum dolor</h6>
<p>Product code PSBJ3</p>
</td>
<td>
<span class="quantity"><span class="light">1 x</span> $79.00</span>
Remove
</td>
</tr>
</table>
<br class="clearfix">
</div>
<div class="footer">
<table class="checkout-table pull-right">
<tr>
<td class="align-right">Tax:</td>
<td>$0.00</td>
</tr>
<tr>
<td class="align-right">Discount:</td>
<td>$37.00</td>
</tr>
<tr>
<td class="align-right"><strong>Total:</strong></td>
<td><strong class="parent-color">$999.00</strong></td>
</tr>
</table>
</div>
<div class="box-wrapper no-border">
<a class="button pull-right parent-background" href="#">Checkout</a>
<a class="button pull-right" href="order_info.html">View Cart</a>
</div>
</li>
</ul>
Have you tried adding overflow:scroll to your element's CSS?
You wants something like this ?
See this fiddle
#cart-dropdown { height: 300px; overflow-y: scroll;}

aaSorting in datatables not working properly

I have the following html in my first column. It shows a icon and an anchor tag.
<tr class="even">
<td class=" sorting_1">
<span data-sortvalue="0">
<img title="icon" src="icon.png">
0
</span>
</td>
</tr>
<tr class="odd">
<td class=" sorting_1">
<span data-sortvalue="1">
<img title="icon" src="icon.png">
1
</span>
</td>
</tr>
<tr class="even">
<td class=" sorting_1">
<span data-sortvalue="2">
<img title="icon" src="icon.png">
2
</span>
</td>
</tr>
....................
...................
...................
I am using aaSorting[0, 'asc']
In chrome, the 0 value is always staying at the top if the column is sorted either ascending or descending. All the remaining values are getting sorted accordingly.
In firefox, the sorting is completely broken.
The data attributes for sorting on your span tags need to be on the td tag. They should also be changed to just 'data-sort' or 'data-order'.
Check out DataTables data-attributes docs here
<tr class="even">
<td class=" sorting_1" data-sort="0">
<span>
<img title="icon" src="icon.png">
0
</span>
</td>
</tr>
...
...

Get Td cell from the last cell using Jquery

I have a table like this:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center" style="width: 30%">Name</th>
<th class="hidden-480 center" style="width: 40%">URI</th>
<th class="hidden-phone center" style="width: 30%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">
Admin_Agency
</td>
<td class="uri">
/admin/agency
</td>
<td>
<a href="#modalEdit">
<i class="icon-pencil"></i>
<span>Edit</span>
</a>
<a href="#modalDelete">
<i class="icon-trash"></i>
<span>Delete</span>
</a>
</td>
</tr>
<tr>
<td class="name">
System_Log
</td>
<td class="uri">
/admin/syslog
</td>
<td>
<a href="#modalEdit">
<i class="icon-pencil"></i>
<span>Edit</span>
</a>
<a href="#modalDelete">
<i class="icon-trash"></i>
<span>Delete</span>
</a>
</td>
</tr>
</tbody>
</table>
When click on Edit < a href="#modalEdit"> , I want to get the the data from the 2 sibling td , that is the < td class="name"> , < td class="uri"> .
I add an onclick event on < a href="#modalEdit"> to parse data to the model when fire event click :
var name = $(this).parent().siblings(".name").html()
var uri = $(this).parent().siblings(".uri").html()
The code does not run.
Is there any suggestion for me?
THanks
you have to use closest() to get its parent tr and then use find() to get td with via class selector, and the use text() to get the text between the opening and closing tag of td.
Like this:
var name = $(this).closest("tr").find(".name").text();
var uri = $(this).closest("tr").find(".uri").text();
FIDDLE EXAMPLE

jquery toggle/show hide

I have following markup which is generated dynamically using C# in my asp.net MVC2 application. There could be more rows depending on data in database. I have shown two rows. one is view row other is edit row. by default I want 'view' row(s) visible and rows with id 'edit' will be invisible. I want to use jQuery so that:
on click of toggle link, I want view row invisible and edit row visible
on click of update/cancel images, I want edit row invisible and view rows visible. edit button will cause postback
There can be more than one rows with same id (view or edit), do i need to use class instead of id?
<table>
<tr id="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
<tr id="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
</table>
[EDIT]
I used this but it is not working:
<script type="text/javascript">
$(function () {
$(".icon-button").click(function () {
alert('I am here');
$('.view,.edit').toggle();
return false;
});
$(".icon-button-cancel").click(function(){
alert('I am there');
$('.view,.edit').toggle();
return false;
}
});
Please suggest solution using jQuery/JavaScript or any any other ASP.NET alternative
I think you may run into problems having multiple elements with the same ID, and it will certainly confuse you in the future.
My suggestion is to use classes instead. Small difference in your markup but big difference in semantics/intent.
Then, you could write simple jQuery code as the click events for your buttons (this goes in your document.ready):
$("#update").click(function() {
$(".edit").show();
$(".view").hide();
}
and so on.
So, assuming you make the following changes:
Wrap your rows in <td> cells to conform to a table format.
Use class names instead of IDs (as I mentioned in a comment, an ID must be unique across the entire page).
fix your anchor tags to include some form of text.
(Some of these may just be becuase you posted a demo snippet, I'm not sure). Then, I made a couple of adjustments like made the cancel a link instead of an image, but an image will work.
<table>
<tr class="view">
<td>
<a class="toggle" class="icon-button" href="#">Edit</a>
</td>
</tr>
<tr class="edit" style="display:none">
<td>
<img class="update" alt="Update" src="/static/images/update.png">
<a class="cancel" href="#">Cancel</a>
</td>
</tr>
<tr class="view">
<td>
<a class="toggle" class="icon-button" href="#">Edit</a>
</td>
</tr>
<tr class="edit" style="display:none">
<td>
<img class="update" alt="Update" src="/static/images/update.png">
<a class="cancel" href="#">Cancel</a>
</td>
</tr>
</table>
Then the following will work (with jQuery):
$('.toggle').click(function(){
var $tr = $(this).closest('tr');
$tr.add($tr.next('.edit')).toggle();
});
$('.cancel').click(function(){
var $tr = $(this).closest('tr');
$tr.add($tr.prev('.view')).toggle();
});
DEMO
why dont you use jquery .toggle itself
http://api.jquery.com/toggle/
Yes, your rows will need classes.
Then you can toggle your rows like this:
$('.view,.edit').toggle();
<table>
<tr id="view" class="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" class="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
<tr id="view" class="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" class="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
</table>
You had a javascript issue.
Try This:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<a class="toggle" href="#">Toggle</a>
</td>
</tr>
<tr style="display:none">
<td>
<img class="update" alt="Update" src="/static/images/update.png" />
<img class="cancel" alt="cancel" src="/static/images/cancel.png" />
</td>
</tr>
<tr>
<td>
<a class="toggle" href="#">Toggle</a>
</td>
</tr>
<tr style="display:none">
<td>
<img class="update" alt="Update" src="/static/images/update.png" />
<img class="cancel" alt="cancel" src="/static/images/cancel.png" />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$(".toggle").click(function(){
$(this).parents("tr:first").next().toggle();
});
$(".cancel").click(function(){
$(this).parents("tr:first").prev().toggle();
});
});
</script>

Categories