While attempting to get the proper jquery for this question I ran into a question. Shouldn't each of these have similar outputs? The first one doesn't even output the class of the divs
var list = document.querySelectorAll('[aria-label="Help"]');
console.log('&&&&&&&&&&&&&&');
$('[aria-label="Help"] tr div').each(function() {
console.log($(this).attr('class'));
console.log($(this).text());
});
console.log('&&THIS ONE WORKS&&&');
$('.text:not(:contains(X-Men 2),:contains(X-Men 3))').each(function() {
console.log($(this).text());
});
console.log('&&&&&&&&&&&&&&');
$('[aria-label="Help"] .text:not(:contains(X-Men 2),:contains(X-Men 3))').each(function() {
console.log($(this).text());
});
console.log('&&&&&&&&&&&&&&');
$('.text:not(:contains(X-Men 2),:contains(X-Men 3))',$(list)).each(function() {
console.log($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id=5 aria-label="Help">
<thead></thead>
<tbody>
<tr>
<div class='abc'>
<label><a><span class='text'>Game of thrones</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>Harry Potter</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men 2</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men 3</span></a></label>
</div>
</tr>
</tbody>
</table>
Putting a div inside a tr is invalid html, so the browser "fixes" the layout for you, breaking your selectors that rely on the expected hierarchy.
Here's what the inspector shows:
<div class="abc">
<label><a><span class="text">Game of thrones</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">Harry Potter</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men 2</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men 3</span></a></label>
</div>
<table id="5" aria-label="Help">
<thead></thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
https://jsfiddle.net/bduhtfL6/
Related
I have the below HTML file, and I want to expand the hidden table when I click the button tab which is implemented successfully and need to implement when I tried to click the button the second time should hide the specific table which is opened by button earlier.
$(document).ready(function() {
$('.data_table').hide();
$('.button').on('click', function() {
$('.data_table').hide();
$(this).parent().next().find('table.data_table').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
I need to click the same button to hide the table which is opened earlier.
You should use toggle method for this. Basically $('.data_table').hide() inside your click event was causing issues.
$(document).ready(function() {
$('.data_table').hide();
$('.button').on('click', function() {
$(this).parent().next().find('table.data_table').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
</body>
</html>
use .toggle() instead of .hide() , if i understand correctly you want to open and close the table with the same button see below
$(document).ready(function() {
$('.button').on('click', function() {
$('.data_table').toggle();
});
})
div.data_table {
border: 2px dashed #000;
height: 200px;
width: 95%;
margin-top: 10px;
text-align: center;
line-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">CLICK me to toggle the below div</button>
<div class="data_table">show hide this elemnt</div>
You can do this by easily with Jquery toggle function. As this is an example you to you.
$(function(){
$(".data_table").hide();
$('.button').on('click', function() {
$(this).parent().next().find('table.data_table').toggle();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
</body>
</html>
I have a below html tags which is feeding the data from database and display as table in html
<html>
<body>
<div>
<button type="button" class="button">DATA_1</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_2</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_3</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</body>
</html>
I have the below script which is going to hide all table by default
$(document).ready(function(){
$('.data_table').hide();
});
Also the button and table were generated automatically, and its completely dynamic page. I don't have any control to limit the data. The table gonna increase as per the input data that feed from db. Now I would like to show only specific records as per user click. If the user click DATA_1 button It should show the respective table and other should be hide.
I tried below script to show the respective data which is not working as expected:
$(document).ready(function(){
$('.button').on('click', function(){
$('.data_table').show();
});
});
The above code expand all the table instead of showing/hiding its immediate child table or first matching child table.
Also, I would like to do the same (Clicking DATA_1 button will show the immediate class(data_table)and other will be hide) with below html tags:
<html>
<body>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Can somebody help me to achieve this? I would like to showcase/hide only the immediate child table or first matching child table when I try to click the button.
You need to use $(this).next(). If you use $('.data_table'), it will show() all tables having that as a class. Hence, you need to use $(this).next()
$(document).ready(function() {
$('.data_table').hide();
$('.button').on('click', function() {
if ($(this).parent().next().find('table.data_table').is(":visible")) {
$(this).parent().next().find('table.data_table').hide();
} else {
$('.data_table').hide();
$(this).parent().next().find('table.data_table').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
you should write like this:
$('.button').on('click', function(){
$(this).next().show().siblings('.data_table').hide();
});
You have to hide all tables first: $('.data_table').hide(); and you have to do it again after each button click.
Make the table next to the clicked button visible: $(this).next('.data_table').show();
$(document).ready(function(){
/* hide all tables initially */
$('.data_table').hide();
$('.button').on('click', function(){
/*on click hide all tables again */
$('.data_table').hide();
/* show table next to the clicked button */
$(this).next('.data_table').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div>
<button type="button" class="button">DATA_1</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_2</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_3</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</body>
</html>
I want the last two rows of a table to be folded and collapse when user click on something like "Click Here to see more rows". that would appear as the last row of the first two rows, and turn into some toggle button if a user wants to fold them back.
After understanding there's no way to do this via CSS2 only,
I guess that if I want IE8 support as well I would need to use javascript/jquery.
I found a jquery accordion example and tried to implement it on a table, but it didn't really work.
Here's a fiddle
Tried wrapping up the last two rows with a <div class="open">` but it didn't work (barely have knowledge in jquery, just trying to patch this up for a website).
On IE7 if it's impossible, I want all the rows to be collapased from the start.
HTML:
<table border="1">
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr class="open">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
javascript:
$(document).ready(function () {
$('table').accordion({collapsible: true,active: false,header: '.open' });
});
http://jsfiddle.net/4rkkksmd/4/
javascript:
$('tr.btn td').click(function(){
$('tr.hidden .slide').toggle(200)
});
html:
<table border="1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5asdfasdfasdf</th>
</tr>
</thead>
<tbody>
<tr class="btn">
<td colspan="5">Click me</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
I have an html table inside a div, and i want to run jquery on each li element or the li class
and alert his id.
this is the html code.
this is the html code.
HTML:
<div id="lightbox_tlbr" style="top: 273px; display: block;">
<div id="test">
<div class="header_div" id="first_header"></div>
<div class="header_div" id="second_header"></div>
<div class="header_div" id="third_header"></div>
<div class="header_div" id="fourth_header"></div>
</div>
<li class="announcement_tlbr" id="announcement7">
<table id="tg_toolbar7" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text07">
<th style="background-image:url(/srv/admin/img/announcement/general_message_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text17"></th>
<th colspan="2" style="background-color:green" class="title_style_toolbar" id="tg_text27"><a style="color:white;font-size:11px;">2014-03-27 10:36:25</a><br><a style="color:white;">Title - 6 test</a><a></a></th>
<td style="width:0px;background-color:green;" id="tg_text87"><input type="button" class="minimze" style="background-color:green;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze7"></td>
</tr>
<tr id="tg_text97">
<td colspan="2" class="tg_text" id="tg_text37"></td>
</tr>
<tr class="r2_toolbar" id="tg_text47">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text57"></td>
<td class="tg_toolbar-031e" id="tg_text67"></td>
<td class="tg_toolbar-031e" id="tg_text77"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button7"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox7"></td>
</tr>
</tbody>
</table>
</li>
<li class="announcement_tlbr" id="announcement5">
<table id="tg_toolbar5" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text05">
<th style="background-image:url(/srv/admin/img/announcement/bug_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text15"></th>
<th colspan="2" style="background-color:red" class="title_style_toolbar" id="tg_text25"><a style="color:white;font-size:11px;">0000-00-00 00:00:00</a><br><a style="color:white;">Title - 4 test</a><a></a></th>
<td style="width:0px;background-color:red;" id="tg_text85"><input type="button" class="minimze" style="background-color:red;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze5"></td>
</tr>
<tr id="tg_text95">
<td colspan="2" class="tg_text" id="tg_text35"></td>
</tr>
<tr class="r2_toolbar" id="tg_text45">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text55"></td>
<td class="tg_toolbar-031e" id="tg_text65"></td>
<td class="tg_toolbar-031e" id="tg_text75"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button5"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox5"></td>
</tr>
</tbody>
</table>
</li>
<div align="left" class="footer">Please confirm you have read and acted upon this message</div>
</div>
i try:
jQuery.each(".announcement_tlbr", function(k,v){ alert(k); })
what is a good way to do this?
You should use this inside each to get the reference of current element.Try this:
jQuery.each(".announcement_tlbr", function(e){
alert($(this).attr('id'));//or this.id
});
$(document).ready(function() {
$(".announcement_tlbr").each(function(){
alert($(this).attr("id"))
});
});
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!