Can someone point out why this isn't working? I'm trying to click on Div A within a Container Div, and on click, go up to the parent container, find the next Div B, and toggle its visibility.
Note: The reason I'm doing it like this is I don't want to show ALL divs with the "child" class. Only the next one after the parent div.
http://jsfiddle.net/vecalciskay/54HxU/5/
HTML:
<div class="container">
<div class="parent">
<span> Parent Text (click) </span>
</div>
<div class="child">
<table>
<tr>
<td>
This
</td>
<td>
Table
</td>
</tr>
<tr>
<td>
Should
</td>
<td>
Expand
</td>
</tr>
</table>
</div>
<div class="parent">
<span> Parent 2 (don't click) </span>
</div>
<div class="child">
<table>
<tr>
<td>
This
</td>
<td>
Table
</td>
</tr>
<tr>
<td>
Should Not
</td>
<td>
Expand
</td>
</tr>
</table>
</div>
JQUERY:
$(document).ready(function () {
$('.child').hide();
$('.parent').click(function () {
var obj = $(this).parent().next(".child");
obj.toggle("fast");
return false;
});
});
Thanks to all the comments, I realized I was misinterpreting the siblings. Problem solved!
Related
I have the following HTML table format (just showing one row out of many) which has a button on the last cell:
<div id=main>
<div class='info'>
<p>Name: <span class='x'>ABC</span></p>
<p>Number: <span class='x'>0</span></p>
<table class='newTable'>
<tr>
<th>
Number
</th>
<th>
Value
</th>
<th>
Go
</th>
</tr>
<tr>
<td>
0
</td>
<td>
<span class='k'>11.7</span>
</td>
<td>
<button class='go'>Go</button>
</td>
</tr>
</table>
</div>
</div>
I have an eventListener (mainEntries.addEventListener('click', clickFunction)) which triggers whenever inside <div id = main> ... </div>
I am not allowed to change the HTML. I have two questions:
How do I check inside function clickFunction(e) if I clicked on the button "GO" or somewhere inside <div id = main> ... </div>
***inside clickFunction(e) e is the MouseEvent
If I click on the button how can I get the text inside first cell of the same row?
As already was mentioned, you can use e.target to get clicked element. Then, you can use combination of closest() and cells.item() functions of the found button:
const mainEntries = document.querySelector('#main');
const clickFunction = e => {
if (e.target.tagName === 'BUTTON' && e.target.classList.contains('go')) {
const firstCellSameRow = e.target.closest('tr').cells.item(0).innerText;
console.log('GO button clicked. First cell\'s text at the same row is ', firstCellSameRow);
}
else {
console.log('Main div clicked outside of GO button');
}
}
mainEntries.addEventListener('click', clickFunction);
<div id=main>
<div class='info'>
<p>Name: <span class='x'>ABC</span></p>
<p>Number: <span class='x'>0</span></p>
<table class='newTable'>
<tr>
<th>
Number
</th>
<th>
Value
</th>
<th>
Go
</th>
</tr>
<tr>
<td>
0
</td>
<td>
<span class='k'>11.7</span>
</td>
<td>
<button class='go'>Go</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
<span class='k'>8.5</span>
</td>
<td>
<button class='go'>Go</button>
</td>
</tr>
</table>
</div>
</div>
I added another distinct row for showing different logs.
1) you should consider e.target inside function clickFunction(e)
2) you should select the grandparent of that button, then, from the parent, you select the first child. buttonElement.parentNode.parentNode.children[0].innerText
I want to open a another <tr> tag when first <tr> is click.
The code is :
<tr class="msg_inner">
<td><label>some text</label></td>
<tr id="full_msg" style="display:none">
<td><label>Hey There.....</label></td>
</tr>
</tr>
script
$('.msg_inner').click(function(){
$('#full_msg_'+no+'').toggle("slow");
});
it display block but all is open at same time. I want to display that block after <tr> is click.
Don't use another <tr>.
Just add a <div> in your td and simply show him like that
HTML :
<table>
<tr class="line">
<td>
Hi there !!
<div class="detail">
More info here...
</div>
</td>
</tr>
<tr class="line">
<td>
Hi there !
<div class="detail">
More info here...
</div>
</td>
</tr>
<tr class="line">
<td>
Hi there !
<div class="detail">
More info here...
</div>
</td>
</tr>
</table>
CSS
.detail{
display:none;
}
JQuery
$(".line").click(function(){
$(this).find(".detail").toggle();
});
Working Fiddle here
you can try this one:
var x=0;
$(".line").click(function(){
if((x%2)==0)
{
$(this).find(".detail").show();
}
else
{
$(this).find(".detail").hide();
}
x++;
});
DEMO HERE
Or
Toogle Method
$(".line").click(function(){
$(this).find(".detail").toggle(1000);
});
DEMO HERE
I know my title is quite confusing but let me explain.
Basically I want to manipulate a table to add and insert tr's and td's anytime because that is what I decided to do for my layout.It's like this:
On the first wave, let's say window = 1, the layout should simply shows one window:
[]
<tr>
<td>
</td>
</tr>
Second wave, window = 2:
[] []
<tr>
<td>
</td>
<td>
</td>
</tr>
Third wave, windows = 3:
[]
[]
[]
<tr>
<td>
</td>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
fourth wave, windows = 4:
[] []
[] []
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
Those brackets would be like a div inside a td. It does not matter on what is inside the div for as long as those windows are formatted that way.
I already got till second wave, but unable to proceed at window3. What I got is li
[]
[] []
<tr>
<td><div></td>
</tr>
<tr>
<td><div></td>
<td><div></td>
</tr>
Which is not suppose to be. How do I do it like the expected result as stated before in javascript? there will be like a trigger it to transform each wave. Any ideas? kindly help. Thanks
Use divs instead of tables. Start with a single container div that will hold all the others.
<div class="container">
</div>
On each iteration, add a child and change the class of the container to reflect having an odd or even number of children.
first:
<div class="container odd">
<div></div>
</div>
second:
<div class="container even">
<div></div>
<div></div>
</div>
third:
<div class="container odd">
<div></div>
<div></div>
<div></div>
</div>
and so on.
Then just write some css to put .odd in one column and .even in two.
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!
I am playing around with the JavaScript functions insertAfter and insertBefore, however I am trying to insertAfter and insertBefore two elements.
For instance, consider the following HTML:
<table>
<tbody>
<tr>
<td>
Item 1
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Item 2
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
</table>
Then I have this JavaScript code snippet:
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
Basically when the Up class is called, the previous row is moved up and when the Down class is called, the current row is moved down one row.
What I want to do, is move the rows Up/Down 2 rows... meaning something like row.prev().prev() or row.next().next() however this does not seem to work.
Is there an easy way around this?
Would appreciate any help/suggestions.
to go up
row.prev().prev().before(row)
to go down
row.next().next().after(row)
obviously the tr must exist prev/next have to exist
NB you are caching row as the first tr element so row is changing every time the first tr element change
listen to event
$("table").on("click","tr > td > span.moveup", function() {
var row = $(this).parent().parent();
if (row.prev().prev().get(0)) row.prev().prev().before(row)
})