I want to remove class only selected row because in a laravel foreach loop I have multiple rows like this:
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
I wanted it so that if the user clicks on first row only, its class should be removed so I tried this:
$('.remove-d-none').on('click', function(){
$('.menu').removeClass('d-none');
});
But it doesn't seem to work. Does somebody know how to help?
$('.remove-d-none').on('click', function() {
$(this).siblings(".manue").removeClass("d-none");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
</table>
Related
This is my table, of course with some text in it, and I want on a button click to hide it, and show some images. I also want to reverse the action on the same button click. How can I do that?
<div id="aspect" style="display:yes">
<table style="100%" id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p>
</td>
</tr>
</table>
</div>
you can start with jQuery .toggle() method
$("button").click(function(){
$("img").toggle();
});
this will work as you need
Have a look here: http://api.jquery.com/toggle/
Please have a look at this code sample. I have used jQuery 2.1.1
$(function() {
$('#toggler').click(function() {
$('#Table').toggle();
$('#imageblock').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aspect">
<div style="display:none;" id="imageblock">
<img src="http://lorempixel.com/400/200/" />
</div>
<table id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p> </td>
</tr>
</table>
</div>
<button id="toggler">Toggle Image/Table</button>
<tr role="row" class="odd">
<td style="background-color:white">
<table>
<tbody>
<tr data-row-id="22">
<td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22"><label class="pid 8843">8843</label></td>
<td style="width: 120px">QCH/H3E/TCZN0D </td>
<td style="width: 270px">Territory Health Intermediate Hospital 500 With Essential Extras </td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-success 8843 pull-right" id="approve-row" data-id="22" href="javascript: void(0)" style="display:none">
<i class="glyphicon glyphicon-plus">Approve</i>
</button>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding:0">
<table>
----
</table>
</td>
</tr>
I am using jQuery datatable and in each row I have tables with inner tables.
I am able to get the required table from the datatable list using:
$(this).closest('table').closest('table tr')[0]
But I am not able to get the pid value which is inside
<label class="pid 8843">
I want to find the pid value. Each row has different pid values. For example:
<label class="pid 2">
<label class="pid 3">
<label class="pid 4">
...
I have found the correct tr in which my pid value resides but how to get the pid value is a problem.
Any help would be appreciated.
if the structure is same in you table, just target label and class to get that attr,, like this:
:EDIT (target input, even better)
$( $(this).closest('table').closest('table tr')[0] ).find('input').val()
try again please
Try this:
$('button').closest('table').find('tr:first td:first').find('label').attr('class')
console.log($('button').closest('table').find('tr:first td:first').find('label').attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22"><label class="pid 8843">8843</label></td>
<td style="width: 120px">QCH/H3E/TCZN0D </td>
<td style="width: 270px">Territory Health Intermediate Hospital 500 With Essential Extras </td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-success 8843 pull-right" id="approve-row" data-id="22" href="javascript: void(0)">
<i class="glyphicon glyphicon-plus">Approve</i>
</button>
</td>
</tr>
</tbody>
</table>
My table is built with the same ID's on every row, with a foreach loop. To find the text inside the <p class="comment" - I have to specify where ( I want to find the closest one )
My table looks like this:
<c:forEach items="${items}" var="item">
<div class="container theme-showcase" role="main">
<div class="row">
<div class="col-md-6">
<table class="table fixed">
<tbody id="extend">
<tr data-toggle="collapse123" class="clickableRow" nowrap="true" data-target=".demo${item.id}" id="${item.id}">
<td class="AMLLeft" nowrap="true">
<label for="important"style="display: inline !important">ID:</label>
<p class="important"style="display: inline !important">${item.id}</p>
</td>
<td align="right" class="AMLRight">
<pre class="thepre">Transaction sum: ${item.sum} ${item.currencyCode}</pre>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>AML ID: ${item.id}</p></div>
</td>
<td align="right" nowrap="false">
<div class="collapse123 demo${item.id}"><input type="button" value="Comment" class="btn btn-xs btn-primary commentButton" <a href="#myModal" data-toggle="modal" id="${item.id}" data-target="#edit-modal"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>AML Category: ${item.amlClientCategory}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"><input type="button" value="Close" class="btn btn-xs btn-primary closeButton"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>Client ID: ${item.clientId}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"><input type="button" value="Set Investigate" class="btn btn-xs btn-primary investigateButton"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p class="status">Status: ${item.status}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p class="comment">Comment: ${item.comment}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>Transaction sum: ${item.sum} ${item.currencyCode}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</c:forEach>
I want to find the text of <p class="comment">${item.comment}</p> but this time it's inside a <div>. I'm not sure how to do this but this is the code I've tried so far:
var commentValue = $(this).closest('tr.hiddenRow').siblings().find('p.comment').text();
Any help is very appreciated!
I know I've posted a similar question here but this is different because it's inside a <div>, and I can't help myself.
To save people trawling through the comments, the eventual solution is here:
https://jsfiddle.net/5nL1e31z/3
I believe this achieves what you wanted, and I've tried to break it out so it's clear what's happening: https://jsfiddle.net/5nL1e31z/ If it isn't quite right, just let me know and I can update it.
$('.test-button').click(function () {
var parentRow = $(this).parent().parent();
$(parentRow).css('background-color', 'red');
var hiddenRow = $(parentRow).siblings('.hiddenRow');
$(hiddenRow).css('background-color', 'yellow');
var commentTextP = $(hiddenRow).find('.comment');
console.log(commentTextP.text());
});
var commentvalue = $(this).parent().find('p').text();
http://jsfiddle.net/ux0a3zsx/
Because the button is what this refers to and p is not inside it
did you tried this?
var text= $(this).closest('.hiddenRow').find('.comment');
please let me know how to remove class hide from nextall sublevel when click on mainlevel. It should not remove hide class from other sublevel which is next to mainlevel. please check the table structure below:
<table>
<tbody>
<tr>
<td>
<a class="mainlevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
<tr>
<td>
<a class="mainlevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
</tbody>
</table>
If interpret Question correctly ? , try using .closest() to select parent of clicked element , .nextUntil() , :has() to select tr elements until next mainlevel , .find() to select .hide elements , .toggle() to toggle display of hide elements
$(".mainlevel").click(function() {
$(this).closest("tr").nextUntil("tr:has(.mainlevel)").find(".hide").toggle()
})
.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<a class="mainlevel">click</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">a</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">b</a>
</td>
</tr>
<tr>
<td>
<a class="mainlevel">click</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">c</a>
</td>
</tr>
</tbody>
</table>
I'm actually having the same problem like as in How to prevent jQuery .toggle() to show/hide all within .on 'click' but it didn't help so I'm making my own question.
Is there anyway to prevent toggle to show all but instead show only the neccesary toggle for the user to click? (extra topping -> extra_toppings selected) I did try with my minimum knowledge of using IDs as well this, next(), parents() but with no success.
Here's my code:
JavaScript
$(".extra_topping").click(function() {
$(".extra_toppings").toggle('slow');
});
HTML
(inside a loop over all foods: #foods.each do |food| ...)
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
I shortened to original HTML to just this to simplify the problem.
Here are my actual code look like : (without the rails code)
<table class="table">
<thead >
<tr>
<th>Name</th>
<th>Price</th>
<th>Category</th>
<th>Quantity</th>
<th>Actions</th>
<th>Additional Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td id="food" style="font-weight:bold;">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<div class="extra_topping">
<a>Click me!</a>
</div>
</td>
</tr>
<tr class="extra_toppings">
<td>
</td>
<td colspan="4">
<div class= "mediocre">
<div class= "xaxixo">
<h6>Our Additional Menu</h6>
</div>
<div class="extra_topping">
</div>
<table class="mediocre_table">
<tr>
<td>
<div class="full_mediocre">
<div class="mediocre_collumn">
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
<td>
</td>
</tr>
</tbody>
You could use:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
If that was what your markup always looked like, e.g.
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
jsFiddle here.
I'm finally make it work by changing the code from:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
into:
$(".extra_topping").click(function(){
$(this).parents('tr').next().toggle('slow')
});
It Works!