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>
Related
I am new to javascript and trying to write a javascript code so when a button is clicked its colour will change. I tried different ways but when clicked on the first element works. Not really sure what is going on here. I would appreciate any help.
var count = 1;
function setColor(button, color) {
var property = document.getElementsByClassName("button");
if (count == 0) {
property.style.backgroundColor = "#A94E3B"
count = 1;
}
else {
property.style.backgroundColor = "#EAE8E8"
count = 0;
}
}
this way, with event delegation and classList toggle
const myTable = document.getElementById('my-table')
myTable.onclick = e =>
{
if (!e.target.matches('#my-table button')) return
e.target.classList.toggle('orange')
}
#my-table button {
background-color : yellow;
}
#my-table button.orange {
background-color : orange;
}
table {
border-collapse : collapse;
}
table th,
table td {
padding : .2em .8em;
border : 1px solid darkblue;
text-align : center;
}
table thead {
background-color : #c3e3ee;
}
table td:first-of-type {
width : 8em;
}
<p> Click a button to change its color and click again to reset! </p>
<table id="my-table">
<thead>
<tr> <th colspan="2" >My items:</th> </tr>
</thead>
<tbody>
<tr> <td contenteditable="true">Item 1</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 2</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 3</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 4</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 5</td> <td> <button>STATUS</button></td> </tr>
</tbody>
</table>
To get the reference to the current button, use the this keyword as a parameter value in the function call added inside your onclick attribute. Then use that reference to change the color.
Example:
var count = 1;
function setColor(e, color) {
e.style.backgroundColor = color;
}
<html>
<head>
<script>
</script>
</head>
<body>
<p> Click a button to change its color and click again to reset! </p>
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">My items:</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">Item 1</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 2</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 3</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr class="hide">
<td contenteditable="true">Item 4</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 5</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
</tbody>
</table>
</body>
</html>
I want to know how I can disable my last anchor column. If the values in the first row are NOT 1 or 7
I can do this with input tags, but I can't figure out how to emulate this with anchor tags in my last row.
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
}
#t01 {
width: 100%;
background-color: #fff;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>column6</th>
<th>column7</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Doctor/">Doctor</a>
</td>
</tr>
<tr>
<td>7</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Park/">Park</a>
</td>
</tr>
<tr>
<td>1</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Office/">Office</a>
</td>
</tr>
<tr>
<td>1</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Home/">Home</a>
</td>
</tr>
<tr>
<td>6</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
</td>
</tr>
</tbody>
</table>
<script>
// creating an Array of the values that should cause the <input>
// to be disabled:
const disableValues = [1, 7];
// here we find all the <input> elements in the td:last-child element
// within the <tbody>:
$('tbody td:last-child input')
// and use the prop() method to update the value of the
// 'disabled' property:
.prop('disabled', function() {
// here we navigate from the current <input> to the closest
// ancestor <tr> element and from there find the td:first-child
// element and retrieve its text:
let firstColValue = $(this).closest('tr').find('td:first-child').text();
// here we return whether Boolean true (if the numeric value of the
// text in the first <td> is included in the array of values) or
// false (if that value is not in the array of values):
return !disableValues.includes(+firstColValue);
});
</script>
</body>
</html>
I'm not exactly sure what you mean by "disable" the anchor tags, but if you want to prevent them from navigating the user when clicked on, perhaps you could try this:
$("tr").each(function () {
const $children = $(this).children();
const firstColVal = parseInt($children[0].innerText, 10);
if ([1, 7].includes(firstColVal)) {
$($children[$children.length - 1]).find('a').removeAttr('href').addClass('disabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>test</td>
<td>Google</td>
</tr>
<tr>
<td>2</td>
<td>test</td>
<td>Google</td>
</tr>
<tr>
<td>7</td>
<td>test</td>
<td>Google</td>
</tr>
</table>
You can instead use toggleClass to toggle a class called disabled. Then create an event listener for disabled anchors, and simply do a preventdefault on the event to stop anything from happening when you click on it. After that, play with the CSS class of disabled to get your desired look.
$('tbody td:last-child a')
.toggleClass('disabled', function() {
let firstColValue = $(this).closest('tr').find('td:first-child').text();
return !disableValues.includes(+firstColValue);
});
$(document).on("click","a.disabled",function(e){e.preventDefault();});
.disabled{color:silver;opacity:0.5;pointer-events:none}
document.querySelectorAll('table > tbody > tr').forEach(tr => {
//for each tr
var num = tr.querySelector('td:first-of-type').innerText;
//get first column text (number)
if ((num !== "7") === false || (num !== "1") === false) {
// if not 1 or 7
tr.querySelector('td:last-of-type ').innerHTML = num;
}
// on last td replace inner HTML with a link text
});
or just set .style.pointerEvents = "none"; that will disable a href link, but button stays, not a good UX, but do as you wish.
// creating an Array of the values that should cause the <input>
// to be disabled:
const disableValues = [1, 7];
// here we find all the <input> elements in the td:last-child element
// within the <tbody>:
$('tbody td:last-child input')
// and use the prop() method to update the value of the
// 'disabled' property:
.prop('disabled', function() {
// here we navigate from the current <input> to the closest
// ancestor <tr> element and from there find the td:first-child
// element and retrieve its text:
let firstColValue = $(this).closest('tr').find('td:first-child').text();
// here we return whether Boolean true (if the numeric value of the
// text in the first <td> is included in the array of values) or
// false (if that value is not in the array of values):
return !disableValues.includes(+firstColValue);
});
document.querySelectorAll('table > tbody > tr').forEach(tr => {
var num = tr.querySelector('td:first-of-type').innerText;
if ((num !== "7") === false || (num !== "1") === false) {
tr.querySelector('td:last-of-type ').innerHTML = num;
}
});
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
}
#t01 {
width: 100%;
background-color: #fff;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>column6</th>
<th>column7</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Doctor/">Doctor</a>
</td>
</tr>
<tr>
<td>7</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Park/">Park</a>
</td>
</tr>
<tr>
<td>1</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Office/">Office</a>
</td>
</tr>
<tr>
<td>1</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Home/">Home</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can use mousedown to preempt the normal click behavior and call event.preventDefault() from the mousedown handler.
here i want to remove a specific class from a <td><td> inside table and i have a another table in which i have a button and by clicking on this button i want to remove class of <td><td> which is in different table.
My HTML is As Like
<table id="test">
<tr>
<td class="background"></td>
<td></td>
<td class="background"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="background"></td>
<td class="background"></td>
<td class="background"></td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
Jquery Code am trying is
$("#Close").click(function () {
$('#test', 'tr','td').removeClass("background");
});
Try this:
$("#Close").click(function () {
$('#test td').removeClass("background");
});
$('#test td').removeClass('background');
Maybe this will help:
document.getElementById('tdid').className = '';
$("#Close").click(function() {
$('.background').removeClass("background");
});
.background {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
<tr>
<td class="background">1</td>
<td>1</td>
<td class="background">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td class="background">1</td>
<td class="background">1</td>
<td class="background">1</td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
If you want to remove all then select the class then remove that class.
I am using this jsfiddle: http://jsfiddle.net/vaDkF/828/
(without the top and bottom option) to create a reordering table.
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
I would like to know if it is possible to have the up button disappear (display none) if it is the first row in the table, and the down button disappear if it is the last row in the table.
Thanks!
You can use CSS for this, with first-child and last-child selectors:
tr:first-child .up, tr:last-child .down {
display:none;
}
$(document).ready(function() {
$(".up,.down").click(function() {
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
tr:first-child .up,
tr:last-child .down {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
Updated Demo
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>