I have a table and I would like to change a class on the td by clicking them. When I addClass() each cell changes but it seems override any class.
My desired result for each cell is like this:
How can I achieve this by adding a class to them?
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
background-color: aqua;
}
.outpatient {
background-color: yellow;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
To achieve this can create another element inside each td. The td will be used to display the square with the teal background. The inner element is necessary to show the circle with the yellow background. By default the circle can be hidden, and then displayed when the class is added to the parent td. Try this:
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
overflow: hidden;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
cursor: pointer;
background-color: aqua;
padding: 0;
margin: 0;
position: relative;
}
td div {
width: 32px;
height: 32px;
border: 1px solid transparent;
line-height: 32px;
margin: -1px;
box-sizing: border-box;
}
td.outpatient div {
background-color: yellow;
border-radius: 50%;
border-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
<tr>
<td><div>4</div></td>
<td><div>5</div></td>
<td><div>6</div></td>
</tr>
<tr>
<td><div>7</div></td>
<td><div>8</div></td>
<td><div>9</div></td>
</tr>
</table>
You can consider background-image with radial-gradient to create the circle above the background-color
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 15px;
cursor: pointer;
background-color:aqua;
}
.outpatient {
background-image:
radial-gradient(farthest-side,yellow calc(100% - 3px),#000 calc(100% - 2px),transparent 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Related
How can i make the table responsive with fixed header? means it scrolls when reaches maximum viewpoint. Well, i don't want to scroll the whole page on reaching max viewpoint instead i want table to be scrolled. Also fixed header is important. I tried with box-sizing: border-box; and overflow-x:scroll;but it didn't worked , help me to create a responsive table. Thanks.
table{
border-collapse: separate;
border-spacing: 0;
width: 100%;
box-sizing: border-box;
}
thead,tbody{
box-sizing: border-box;
overflow: auto;
}
th,td{
padding: 6px 15px;
}
th{
background: #42444e;
color: #fff;
text-align: left;
position: static;
top: 50px;
}
tbody tr td img{
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 30px;
height: 30px;
float: none;
display:block;
object-fit: fill;
border-radius: 10%;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
td{
border-right: 1px solid #c6c9cc;
border-bottom: 1px solid #c6c9cc;
}
td:first-child {
border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
background: #eaeaed;
}
tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<table>
<thead>
<tr>
<th>Image</th>
<th>ID</th>
<th>Date</th>
<th>Name</th>
<th>Email</th>
<th>Phone no.</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
</thead>
</table>
I reviewed your codepan and conclude with that, You need to add some CSS property in your CSS file and it's work.
tbody {
height: 200px;
display: inline-block;
overflow: auto;
}
thead tr th{
position: sticky;
top:0;
left:0;
right:0;
}
set position sticky of header
and for table overflow-y set as auto
.fixTable {
overflow-y: auto;
height: 110px;
}
.fixTable thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #060606;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="fixTable">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here is the situation, I have a HTML file with a table, the table gets filled with XML data. The last column (10) got a number in it: 1, 2, 3, 4 or 5. I've got 5 lines of jQuery which look for the number and give the cell with the corresponding number a specific class, this works fine (The cell has 0% opacity because it's not meant to be "shown", but for our means, it works fine like that).
Now the problem is: Column 7 and 8 need to get that class to without the whole column getting it, just the row with the specific number.
I've got a jsfiddle so you can see the code and stuff:
The jQuery:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
Note: The data in the table is just for testing, the real xml will have those number of 1, 2, 3, 4, 5 in like 100 rows in a random order.
EDIT: Got a picture of how it should look:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
td:nth-child(10) {
opacity: 0;
}
.disaster{
background-color: #E45858
}
.high{
background-color: #E87658
}
.average{
background-color: #FEA058
}
.warning{
background-color: #FEC858
}
.information{
background-color: #7498FE
}
/*CSS for main elements*/
div {
max-width: 2600px;
display: block;
}
body {
font-family: Arial, Tahoma, Verdana, sans-serif;
background-color: #FFFFFF;
}
table {
text-align: left;
border-collapse: collapse;
}
th {
font-size: 75%;
font-weight: normal;
color: #768C98;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 2px solid #DCE2E4;
}
td {
font-size: 75%;
color: #1F2C33;
height: 25px;
padding-top: 1px;
padding-bottom: 1px;
border-bottom: 1px solid #EAEEF0;
}
img {
position: absolute; left: -100px;
margin-top: 165px;
transform: rotate(270deg);
}
/*CSS for Hover*/
td:nth-child(1):hover{
text-decoration: underline;
}
td:nth-child(1) {
background-color: #FFFFFF;
}
td:nth-child(2) {
background-color: #FFFFFF;
}
tr.NoHover:hover{
background-color: #FFFFFF;
}
tr:hover {
background-color: #E8F5FF;
}
/*Column specific CSS*/
th.col1 {
text-align: right;
width: 240px;
padding-right: 18px
}
th.col2 {
width: 11px;
padding: none;
}
th.col3 {
text-align: left;
width: 188px;
padding-left: 10px;
}
th.col4 {
text-align: left;
width: 70px;
}
th.col5 {
text-align: left;
width: 77px;
padding-left: 82px;
}
th.col6 {
text-align: left;
width: 430px;
}
th.col7 {
text-align: left;
padding-left: 10px;
width: 497px;
}
th.col8 {
text-align: left;
width: 498px;
}
th.col9 {
text-align: left;
padding-left: 10px;
width: 75px;
}
td:nth-child(1) {
text-align: right;
color: #0274B8;
padding-right: 18px;
border-right: 2px solid #AAD6F0;
border-bottom: none;
}
td:nth-child(2) {
color: white;
border-bottom: none;
width: 11px;
padding: none;
}
td:nth-child(3) {
text-align: left;
text-decoration: underline dotted;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(4) {
text-align: left;
color: #DC0000;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(5) {
text-align: right;
text-decoration: underline dotted;
padding-right: 15px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(6) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(7) {
text-align: left;
text-decoration: underline dotted ;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(8) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(9) {
text-align: left;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<br><br>
<div id="main">
<table id="Table">
<thead>
<tr class="NoHover">
<th class="col1" scope='col' >Time▼</th>
<th class="col2" scope='col' ></th>
<th class="col3" scope='col' >Client</th>
<th class="col4" scope='col' >Status</th>
<th class="col5" scope='col' >Site</th>
<th class="col6" scope='col' >Host</th>
<th class="col7" scope='col' >Problem • Cause</th>
<th class="col8" scope='col' ></th>
<th class="col9" scope='col' >Frequency</th>
<th class="col10" scope='col'></th>
</tr>
</thead>
<tbody id="TableData">
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 1</td>
<td>FAILING</td>
<td>Site 1</td>
<td>PC1</td>
<td>test1</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>1</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 2</td>
<td>FAILING</td>
<td>Site 2</td>
<td>PC2</td>
<td>test2</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>2</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 3</td>
<td>FAILING</td>
<td>Site 3</td>
<td>PC3</td>
<td>test3</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>3</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 4</td>
<td>FAILING</td>
<td>Site 4</td>
<td>PC4</td>
<td>test4</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>4</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 5</td>
<td>FAILING</td>
<td>Site 5</td>
<td>PC5</td>
<td>test5</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</body>
I think you are looking for the .siblings() selector:
$("td:nth-child(10):contains('1')").siblings('td:nth-child(7), td:nth-child(8)').addClass('disaster');
$("td:nth-child(10):contains('2')").siblings('td:nth-child(7), td:nth-child(8)').addClass('high');
$("td:nth-child(10):contains('3')").siblings('td:nth-child(7), td:nth-child(8)').addClass('average');
$("td:nth-child(10):contains('4')").siblings('td:nth-child(7), td:nth-child(8)').addClass('warning');
$("td:nth-child(10):contains('5')").siblings('td:nth-child(7), td:nth-child(8)').addClass('information');
Fiddle: https://jsfiddle.net/8sL86sc7/2/
Something like this maybe? (Fiddle)
$("tr").each(function(index) {
var row = $(this),
lastCol = row.find('td:nth-child(10)'),
appendTo = row.find('td:nth-child(7), td:nth-child(8), td:nth-child(10)');
switch(lastCol.text()) {
case '1':
appendTo.addClass('disaster');
break;
case '2':
appendTo.addClass('high');
break;
case '3':
appendTo.addClass('average');
break;
case '4':
appendTo.addClass('warning');
break;
case '5':
appendTo.addClass('information');
break;
}
});
If there are a lot of rows and you don't need extra stuff to happen exept for the added classes, this could be overkill. the .siblings() selector (as in this answer) could be enough.
I have some span objects that I insert into a table with jQuery with a specific width attribute. I want the widths of these objects to change as the window size changes, as the table has position relative.
Here is my code (The snippet doesn't show the issue very well - changing window size, but it gives an idea of the context):
$(document).ready(function() {
var var1 = 2
var element = $('td').filter(function() {
var holidayText = $(this).contents()[0].textContent.trim();
return parseInt(holidayText, 10) == var1;
});
//need this to adjust with table size
var cell_width = element.width();
var2 = 3;
var width = var2 * cell_width;
add_html = element.append('</br><span class="spanclass" style="width: ' + width + 'px; position: absolute"></span>');
});
div.class1 {
position: relative;
}
table {
border: 1px solid navy;
width: 70%;
text-align: center;
}
table th {
text-align: center;
width: 100px;
height: 20px;
}
table td {
width: 100px;
height: 100px;
vertical-align: top;
text-align: right;
border: 1px solid #c6c6ec;
position: relative;
}
span.spanclass {
background-color: purple;
height: 14px;
display: inline-block;
padding: 2px;
left: 0;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="class1">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>
How do I get a width attribute / assign a new attribute that means this widths scales with the table/window size? Do I use em for this? Or as a percentage width?
Thanks
You have to use $(window).resize().
I have changed your script and it's working for me:
https://fiddle.jshell.net/71rd84jy/
Let me know. Cheers.
Why use js in a first place?
$(document).ready(function() {
var var1 = 2
var element = $('td').filter(function() {
var holidayText = $(this).contents()[0].textContent.trim();
return parseInt(holidayText, 10) == var1;
});
add_html = element.append('</br><span class="spanclass"></span>');
});
div.class1 {
position: relative;
}
table {
border: 1px solid navy;
width: 70%;
text-align: center;
}
table th {
text-align: center;
width: 100px;
height: 20px;
}
table td {
width: 100px;
height: 100px;
vertical-align: top;
text-align: right;
border: 1px solid #c6c6ec;
position: relative;
}
span.spanclass {
background-color: purple;
height: 14px;
display: inline-block;
padding: 2px;
left: 0;
z-index: 1;
position: absolute;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>
Notice box-sizing: border-box; - it make width 100% including 2px of padding, otherwise it would be [2px]+[100%]+[2px]
I'm trying to achieve a sort of selection effect on a table that I'm currently working on. I want to do this by adding a class to the table row that the user clicks. The class that gets added to the row will add a small circle to the left of the row. However, as I'm adding the class to the row, the table (or the row) seems to expand a few pixels. I can't figure out why.
Some example code to illustrate my problem:
document.querySelector('tr').addEventListener('click', function() {
if (!this.classList.contains('clicked')) {
this.classList.add('clicked');
return;
}
this.classList.remove('clicked');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
.clicked:before {
position: absolute;
content: '';
right: 100%;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
}
<table>
<tr>
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
Any help would be much appreciated!
You could add your clicked:before element and set it's opacity to 0 and then on the click event add another class to actually show the element.
document.querySelector('tr').addEventListener('click', function() {
if (!this.classList.contains('show-clicked')) {
this.classList.add('show-clicked');
return;
}
this.classList.remove('show-clicked');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
tr {
margin-left: 10px;
}
.clicked:before {
position: absolute;
content: '';
right: 100%;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
opacity: 0;
}
.show-clicked:before {
opacity: 1;
}
<table>
<tr class="clicked">
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
I have a trick. I hope it works as what you want
document.querySelector('tr').addEventListener('click', function() {
if (!this.classList.contains('clicked')) {
this.classList.add('clicked');
return;
}
this.classList.remove('clicked');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
.show-me {
width: 10px;
height: 10px;
border: 0;
background-color: transparent;
}
.show-me span {
display: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
}
.clicked .show-me span {
display: block;
}
<table>
<tr>
<td class="show-me">
<span></span>
</td>
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
You could use the css visibility property and an extra class. This way any effect that is caused by ::before will be in the rendering but just not visible.
Summary The visibility property can be used to hide an element while
leaving the space where it would have been. It can also hide rows or
columns of a table.
document.querySelector('tr').addEventListener('click', function () {
this.classList.toggle('visible');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
.clicked::before {
position: absolute;
content:'';
right: 100%;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
visibility: hidden;
}
.visible::before {
visibility: visible;
}
<table>
<tr class="clicked">
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
This post helped me solve the problem. Seems :before actually "creates" a new table cell. Had to add the :before to the first <td> in my code instead of the <tr>.
Is it possible to use pseudo-elements (:after, :before) inside a table row?
Here is my JSfiddle with the table environment: http://jsfiddle.net/pY66Q/
I am having trouble understanding how I can write my JavaScript in such a way that when the element with the given class name of "pmap-program-name-label" is clicked, the click handler runs an expression that will only slideToggle the second child of the that contains the that was clicked. I hope that makes sense.
My HTML:
<table class="pmap-font-clr-drk-grey">
<thead>
<tr>
<th>Audit Program Results</th>
<th>Open</th>
<th>Closed</th>
<th>Overdue</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="pmap-parent-row-odd">
<td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&S Audits - USF Sites</span></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2011 EH&S Audits - USF Sites</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr class="pmap-parent-row-even">
<td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&S Audits - USF Sites</span></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2011 EH&S Audits - USF Sites</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
</tfoot>
My CSS:
table {
width: 100%;
border: 1px #eaeaea solid;
}
th {
width: 10%;
text-align: center;
border-bottom: 4px #007290 solid;
padding: 5px 0;
}
th:first-child {
width: 60%;
text-align: left;
border-bottom: 4px #007290 solid;
padding: 5px 0 5px 20px;
font-family: 'Segoe UI Bold' sans-serif;
font-weight: normal;
}
tr:nth-child(2) {
display: none;
}
td {
width: 10%;
text-align: center;
border-bottom: 1px #eaeaea solid;
border-left: 1px #eaeaea solid;
padding: 0;
line-height: 30px;
}
td:first-child {
width: 60%;
text-align: left;
border-bottom: 1px #eaeaea solid;
padding-left: 38px;
}
td.pmap-program-name-label {
width: 60%;
text-align: left;
border-bottom: 1px #eaeaea solid;
padding: 2px 0 0 10px;
color: #007290;
font-weight: bold;
cursor: pointer;
}
td.pmap-program-name-label span {
padding-left: 10px;
}
tr.pmap-parent-row-odd {
background-color:#FFFFFF;
}
tr.pmap-parent-row-even {
background-color: #F3F4F5;
}
td a {
text-decoration: none;
color: #007290;
font-weight: bold;
}
My JavaScript/jQuery:
$(document).ready(function () {
/*
================================================
Toggles Form Parent/Children Data Fields
================================================
*/
var sectionAnimating = false;
$('.pmap-program-name-label').click(function () {
if (sectionAnimating == false) {
$("tbody").find('tr:nth-child(2)').slideToggle(450, function () {
sectionAnimating = false;
});
sectionAnimating = true;
}
});
});
Here u have code
(document).ready(function () {
/*
================================================
Toggles Form Parent/Children Data Fields
================================================
*/
var sectionAnimating = false;
$('.pmap-program-name-label').click(function () {
if (sectionAnimating == false) {
console.log(this.parentNode.parentNode)
$(this.parentNode.parentNode).find('tr:nth-child(2)').slideToggle(450, function () {
sectionAnimating = false;
});
sectionAnimating = true;
}
});
});