I have a table with checkboxes that have a class of .toggle-extract and when clicked I'd like them to toggle the closest DIV with the class name .extract-years
Now the code I have should work, but it is driving me nuts trying to figure out why it won't trigger.
here is the JSFiddle example.
$(document).ready(function() {
$('.toggle-extract').on('click', function () {
$(this).closest('div').find('.extract-years').toggle("fast");
});
});
and here is the HTML
<table>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
</table>
You could change to
$(this).closest('tr').find('.extract-years').toggle("fast");
$(document).ready(function() {
$('.toggle-extract').on('click', function() {
$(this).closest('tr').find('.extract-years').toggle("fast");
});
});
body {
color: #000;
}
.extract-years {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
</table>
Fiddle
Update: for the second version mentioned as comment, the select statement can be changed to e.g.
$(this).closest('table').parent("td").next("td").
find('.extract-years').toggle("fast");
Adjusted Fiddle, and working version here:
$(document).ready(function() {
$('.toggle-extract').on('click', function() {
$(this).closest('table').parent("td").next("td").find('.extract-years').toggle("fast");
});
});
body {
color: #000;
}
.extract-years {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>
<table class="inline-table-body">
<tbody>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
<tr>
<td>
<table class="inline-table-body">
<tbody>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
</table>
Related
I have a table that needs to have an undefined number of rows that should display a set number of elements when clicked (in this case div, because I read that it's the best way to use toggle on tr). Best I could do is make it for an already set number of elements...
jsfiddle.net - This is with the set number of elements.Working code..
And this is all I got so far trying to figure it out.
Working js code:
$('.warning').on('click', function(e) {
var $ele = $(this).nextUntil('.warning').find('td > div');
$ele.slideToggle();
});
});
In this case, I need each clicked table row to display three corresponding divs.
Obviously, answer with jQuery but I would appreciate a solution in vanilla js as well.
EDIT: I am sorry, I neglected to mention I want to add a sliding animation. And slideToggle doesn't seem to work...
EDIT2: Marked best answer by Terry.
Changed fiddle to working code.
We can actually greatly simplify your markup for your table rows:
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
...and use the following logic:
.nextUntil('.warning') to select the trailing <tr> after each .warning element. See the documentation for .nextUntil().
Use .slideToggle() to show/hide elements, without the need to use overly verbose CSS detection
Here is the logic above, written in jQuery:
$('.warning').on('click', function() {
// Selects all siblings until the next `.warning` <tr>
var $ele = $(this).nextUntil('.warning').find('td > div');
$ele.slideToggle();
});
If you only want to target downstream <tr> that has the class hidden (useful in the scenario where there might be other irrelevant <tr>s in the way that you do not want to toggle), you might want to add an optional filter instead:
$('.warning').on('click', function() {
// Selects all siblings until:
// 1. the next `.warning` <tr>, and
// 2. has the class "hidden"
var $ele = $(this).nextUntil('.warning').filter(function() {
return $(this).hasClass('hidden');
}).find('td > div');
$ele.slideToggle();
});
Of course this means that you get strange stacked borders when hiding elements, because you are technically hiding the table row content, but not collapsing the table rows/cells themselves.
Here is a proof-of-concept example:
$(function() {
$('.warning').on('click', function() {
var $ele = $(this).nextUntil('.warning').filter(function() {
return $(this).hasClass('hidden');
}).find('td > div');
$ele.slideToggle();
});
});
table {
width: 75%;
border-collapse: collapse;
}
tr,
td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden td div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
</tbody>
</table>
Please see below snippet , note that I've set all the hidden class , class='hidden' , it's usless to name each of them differntly :
$(".warning").on("click",function(){
$(this).nextUntil(".warning").find(".hidden").slideToggle();
})
table {
width: 75%;
border-collapse: collapse;
}
tr, td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden, .hidden1, .hidden2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
</tbody>
</table>
$(".warning").on("click", function() { use jQuery .on will add the event to dynamic element (future generated element).
then find the next hidden and toggle will do the trick.
check the example:
$(".warning").on("click", function() {
var nextHidden = $(this).next('.hidden');
nextHidden.find('div').slideToggle();
});
table {
width: 75%;
border-collapse: collapse;
}
tr,
td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
</tbody>
</table>
I am displaying data in a table like this:
name country place number
ashwin India delhi 123
sita India Ajmer 456
and so on.
I want to add checkboxes on hover to a column and allow the user to be able to select multiple values for that column. For instance, the user can select delhi and ajmer or just delhi.
Please help with some jquery or javascript code for this?
Try this -
HTML -
<table border="1" id="demo">
<tr>
<th>name</th>
<th>country</th>
<th>place</th>
<th>number</th>
<th>check</th>
</tr>
<tr>
<td > ashwin </td>
<td> India </td>
<td> delhi </td>
<td> 123</td>
<td><input type="checkbox" id="chk1" style="display:none"></td>
</tr>
<tr>
<td > sita </td>
<td> India </td>
<td> Ajmer </td>
<td> 456</td>
<td> <input type="checkbox" id="chk2" style="display:none"></td>
</tr>
<tr >
<td > sita </td>
<td> India </td>
<td> Ajmer </td>
<td> 456</td>
<td> <input type="checkbox" id="chk2" style="display:none"></td>
</tr>
</table>
JS -
$(document).ready(function(){
$("#demo tr").mouseover(function() {
$(this).find("input[type='checkbox']").show();
});
$("#demo tr").mouseout(function(){
var checkbox = $(this).find("input[type='checkbox']");
if (!checkbox.is(':checked')) {
$(this).find("input[type='checkbox']").hide();
}
});
});
JSFiddle link - https://jsfiddle.net/Lvbj2dmm/10/
<!DOCTYPE html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#one").mouseover(function(){
$("#chk1").show();
});
$("#two").mouseover(function(){
$("#chk2").show();
});
$("#one").mouseout(function(){
if (document.getElementById('chk1').checked) {
$("#chk1").show();
}
else{
$("#chk1").hide();
}
});
$("#two").mouseout(function(){
if (document.getElementById('chk2').checked) {
$("#chk2").show();
}
else{
$("#chk2").hide();
}
});
});
</script>
</head>
<table border="1">
<tr>
<th>name</th>
<th>country</th>
<th>place</th>
<th>number</th>
<th>check</th>
</tr>
<tr id="one"> <!--put id as primary number from db -->
<td > ashwin </td>
<td> India </td>
<td> delhi </td>
<td> 123</td>
<td><input type="checkbox" id="chk1" style="display:none"></td> <!--here but use tr id_chk -->
</tr>
<tr id="two"> <!--put id as primary number from db -->
<td > sita </td>
<td> India </td>
<td> Ajmer </td>
<td> 456</td>
<td> <input type="checkbox" id="chk2" style="display:none"></td><!--here but use tr id_chk -->
</tr>
</table>
</html>
I am working with software that automatically generates a form after you select your options, so the code is automatically generated and I cannot directly edit it. The code it outputs for this form is in tables. I would like the Amount, the radio buttons and their labels to all appear in one line however?
Because I cannot edit the code directly, is there a way to do this w js? Possibly moving all of the columns into one row?
Here is the link to a jsfiddle to the basic code it outputs: https://jsfiddle.net/jelane20/Lt36fq6f/1/
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00" >
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
Thank you so much for your help!
You may add to your css the following rule:
#options tr {
display: inline-table;
}
If you want to achieve the same result with jQuery you can write:
$('#options tr').css('display', 'inline-table');
Instead, if you need to move the sub table content to the upper table you can:
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
The snippet (css solution):
#options tr {
display: inline-table;
}
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight" >
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
The snippet (jQuery solution):
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
I am new to Javascript and already set up the collapsing table below with jquery. This already works. I can expand or collapse the complete table or expand and collapse columns by clicking on the row.
But this also changes the view by setting options like BRS or set (see HTML).
What I want is so control all this by the button "+" in the first column (see HTML).
Maybe it's simple maybe not. Can someone help me?
Thanks
<!DOCTYPE html><html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.js"></script><script type="text/javascript">
$(document).ready(function() {
$('.expandable').nextAll('tr').each( function() { // hide all at start
if(!($(this).is('.expandable')))
$(this).hide();
});
$('.expandable').click(function () { // toggle single by click
$(this).nextAll('tr').each( function() {
if($(this).is('.expandable')) {
return false; }
$(this).toggle();
});
});
$('#expand_all').click(function() { // show all
$('.expandable').nextAll('tr').each( function() {
if(!($(this).is('.expandable')))
$(this).show();
});
});
$('#collaps_all').click(function() { // hide all
$('.expandable').nextAll('tr').each( function() {
if(!($(this).is('.expandable')))
$(this).hide();
});
})
});
</script><title>ConfigPage for CAN on RestbusSimulationStation</title>
<body>
<h2>RSS</h2>
<button style="font-size:20px" id="expand_all">expand all</button><button style="font-size:20px" id="collaps_all">collaps all</button>
<table border="1">
<tr bgcolor="#fb9d00">
<th></th>
<th>FRAMES</th>
<th>ID</th>
<th>DLC</th>
<th>BRS</th>
<th>CYCLE/s</th>
<th>SET</th>
<th>SIGNALS</th>
<th>POS</th>
<th>Bits</th>
<th>select:</th>
<th>comput method</th>
<th>enum</th>
</tr>
<tr class="expandable">
<td><input type="button" value="+"></td>
<td><strong>EOCM_CAN8_MSG01</strong></td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr><td><td><td><td><td><td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span></td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767"><td></td>
<td><input type="number" name="enum" min="0" style="width: 3em;"></td>
</td>
</td></td></td></td></td></td></tr>
<tr class="expandable">
<td><input type="button" value="+"></td>
<td><strong>EOCM_CAN8_MSG01</strong></td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr><td><td><td><td><td><td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span></td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767"><td></td>
<td><input type="number" name="enum" min="0" style="width: 3em;"></td>
</td>
</td></td></td></td></td></td></tr>
</table>
</body>
</html>
Please have a look at this approach.
Instead of attaching click handler to <tr>; we are attaching it to the button like $('.expandable input[type=button]').click. Apart from that rest of the code is almost as it is.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.expandable').nextAll('tr').each(function() { // hide all at start
if (!($(this).is('.expandable')))
$(this).hide();
});
$('.expandable input[type=button]').click(function() { // toggle single by click
var trElem = $(this).closest("tr");
trElem.nextAll('tr').each(function() {
if ($(this).is('.expandable')) {
return false;
}
$(this).toggle();
});
});
$('#expand_all').click(function() { // show all
$('.expandable').nextAll('tr').each(function() {
if (!($(this).is('.expandable')))
$(this).show();
});
});
$('#collaps_all').click(function() { // hide all
$('.expandable').nextAll('tr').each(function() {
if (!($(this).is('.expandable')))
$(this).hide();
});
})
});
</script>
<title>ConfigPage for CAN on RestbusSimulationStation</title>
<body>
<h2>RSS</h2>
<button style="font-size:20px" id="expand_all">expand all</button>
<button style="font-size:20px" id="collaps_all">collaps all</button>
<table border="1">
<tr bgcolor="#fb9d00">
<th></th>
<th>FRAMES</th>
<th>ID</th>
<th>DLC</th>
<th>BRS</th>
<th>CYCLE/s</th>
<th>SET</th>
<th>SIGNALS</th>
<th>POS</th>
<th>Bits</th>
<th>select:</th>
<th>comput method</th>
<th>enum</th>
</tr>
<tr class="expandable">
<td>
<input type="button" value="+">
</td>
<td><strong>EOCM_CAN8_MSG01</strong>
</td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span>
</td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767">
<td></td>
<td>
<input type="number" name="enum" min="0" style="width: 3em;">
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</tr>
<tr class="expandable">
<td>
<input type="button" value="+">
</td>
<td><strong>EOCM_CAN8_MSG01</strong>
</td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span>
</td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767">
<td></td>
<td>
<input type="number" name="enum" min="0" style="width: 3em;">
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</td>
</tr>
</table>
</body>
</html>
The following code it is auto-explained:
HTML:
<table cellspacing="1" class="CRMP_WP_QUICKADS_PLUGIN">
<tr id="CRMP_WP_QUICKADS_tr_in_content">
<td>
<table>
<tr>
<td>
<input type="radio" name="in_content" value="1">
</td>
<td>
Enabled
</td>
</tr>
<tr>
<td>
<input type="radio" name="in_content" value="0">
</td>
<td>
Disabled
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="2">
Hover Ads
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
...
</table>
javascript:
$("input[name='in_content']").click(function(){
if ($(this).val()){
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).show();
} else{
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).hide();
}
});
The hide/show effect is not running.-
Does this work?
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll()
.slice(0,6)
.each(function(index, element) {
element.hide();
});
// is not enough:
if ($(this).val())
// it must be:
if ($(this).val() == 1)