How to apply smooth show/hide effect with slideToggle on jQuery - javascript

I am trying to do show hide content with slideToggle and it is wokign but I am not getting smooth animation effect on my table.
I have tryied with this two code but now getting proper animation effect:
$('.more').slideToggle('fast');
$('.more').stop().slideToggle(500);
Any idea how to do that?
Thanks.
Here is my jQuery code work:
$('#more').click(function () {
$(this).text('See less');
if ($('.more').is(':visible')) {
$(this).text('See more');
} else {
$(this).text('See less');
}
//$('.more').slideToggle('fast');
$('.more').stop().slideToggle(500);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
More about us
<table>
<thead>
<tr>
<th>Date</th>
<th>Address</th>
<th>Rooms</th>
<th>SQM</th>
<th>Floor</th>
<th>Parking</th>
<th class="price">Price</th>
<th>PpM</th>
</tr>
</thead>
<tbody>
<tr>
<td data-name="Date">5/12/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">1</td>
<td data-name="Parking">1</td>
<td data-name="Price">1,410,000</td>
<td data-name="PpM">40,286</td>
</tr>
<tr class="active">
<td data-name="Date">13/05/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking">1</td>
<td data-name="Price">13/05/14</td>
<td data-name="PpM">44,000</td>
</tr>
<tr class="more">
<td data-name="Date">18/08/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">6</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,600,000</td>
<td data-name="PpM">45,714</td>
</tr>
<tr class="more">
<td data-name="Date">14/09/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">4</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,375,000</td>
<td data-name="PpM">39,286</td>
</tr>
<tr class="more">
<td data-name="Date">25/01/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,680,000</td>
<td data-name="PpM">28,966</td>
</tr>
</tbody>
</table>

simply change this:
$('.more').stop().slideToggle(10);// to show effect faster use small value.
$('#more').click(function () {
$(this).text('See less');
if ($('.more').is(':visible')) {
$(this).text('See more');
} else {
$(this).text('See less');
}
//$('.more').slideToggle('fast');
$('.more').stop().slideToggle(10);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
More about us
<table>
<thead>
<tr>
<th>Date</th>
<th>Address</th>
<th>Rooms</th>
<th>SQM</th>
<th>Floor</th>
<th>Parking</th>
<th class="price">Price</th>
<th>PpM</th>
</tr>
</thead>
<tbody>
<tr>
<td data-name="Date">5/12/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">1</td>
<td data-name="Parking">1</td>
<td data-name="Price">1,410,000</td>
<td data-name="PpM">40,286</td>
</tr>
<tr class="active">
<td data-name="Date">13/05/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking">1</td>
<td data-name="Price">13/05/14</td>
<td data-name="PpM">44,000</td>
</tr>
<tr class="more">
<td data-name="Date">18/08/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">6</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,600,000</td>
<td data-name="PpM">45,714</td>
</tr>
<tr class="more">
<td data-name="Date">14/09/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">4</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,375,000</td>
<td data-name="PpM">39,286</td>
</tr>
<tr class="more">
<td data-name="Date">25/01/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,680,000</td>
<td data-name="PpM">28,966</td>
</tr>
</tbody>
</table>

The best is what you can do is make a table out of div's.

Like DevJoeri I would suggest you to use DIVs but if you don't want to or can't. Adding the folowing css rules helped on your example
tr {
float: left;
width: 100%;
}

please check this link
You cannot apply toggle animation to td,tr tag
it can be applied only on div tag

Related

Change text color depending on table value Laravel

I have datatables on Laravel blade. The table has many rows and three columns which have last column value of salary. I have to choose the 15 people with the highest salary from the table.
The first 5 rows (1-5) of the text in the table should be green, the next 5 rows (6-11) should be yellow, the next 5 rows (11-15) should be red, and the remaining rows should be black as usual.
The codes were written using Laravel Blade and table DataTables.
#foreach($jamisoni as $pay)
<tr>
<td>{{$loop->iteration}}</td>
<td>{{$pay->name}}</td>
<td>{{$pay->amount}}</td>
</tr>
#endforeach
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:12px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:12px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-viqs{color:#fe0000;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
.tg .tg-xdmp{color:#0a790a;text-align:left;vertical-align:top}
.tg .tg-i99s{color:#ffcb2f;text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-0lax">ID</th>
<th class="tg-0lax">NAME</th>
<th class="tg-0lax">COUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-xdmp">1</td>
<td class="tg-xdmp">User 35</td>
<td class="tg-xdmp">100 000</td>
</tr>
<tr>
<td class="tg-xdmp">2</td>
<td class="tg-xdmp">User 01</td>
<td class="tg-xdmp">98 000</td>
</tr>
<tr>
<td class="tg-xdmp">3</td>
<td class="tg-xdmp">User 24</td>
<td class="tg-xdmp">95 000</td>
</tr>
<tr>
<td class="tg-xdmp">4</td>
<td class="tg-xdmp">User 26</td>
<td class="tg-xdmp">92 000</td>
</tr>
<tr>
<td class="tg-xdmp">5</td>
<td class="tg-xdmp">User 10</td>
<td class="tg-xdmp">91 000</td>
</tr>
<tr>
<td class="tg-i99s">6</td>
<td class="tg-i99s">User 11</td>
<td class="tg-i99s">85 000</td>
</tr>
<tr>
<td class="tg-i99s">7</td>
<td class="tg-i99s">User 22</td>
<td class="tg-i99s">85 000</td>
</tr>
<tr>
<td class="tg-i99s">8</td>
<td class="tg-i99s">User 24</td>
<td class="tg-i99s">84 000</td>
</tr>
<tr>
<td class="tg-i99s">9</td>
<td class="tg-i99s">User 55</td>
<td class="tg-i99s">83 000</td>
</tr>
<tr>
<td class="tg-i99s">10</td>
<td class="tg-i99s">User 65</td>
<td class="tg-i99s">82 000</td>
</tr>
<tr>
<td class="tg-viqs">11</td>
<td class="tg-viqs">User 40</td>
<td class="tg-viqs">70 000</td>
</tr>
<tr>
<td class="tg-viqs">12</td>
<td class="tg-viqs">User 39</td>
<td class="tg-viqs">69 000</td>
</tr>
<tr>
<td class="tg-viqs">13</td>
<td class="tg-viqs">User 29</td>
<td class="tg-viqs">65 000</td>
</tr>
<tr>
<td class="tg-viqs">14</td>
<td class="tg-viqs">User 44</td>
<td class="tg-viqs">64 000</td>
</tr>
<tr>
<td class="tg-viqs">15</td>
<td class="tg-viqs">User 58</td>
<td class="tg-viqs">63 000</td>
</tr>
<tr>
<td class="tg-0lax">16</td>
<td class="tg-0lax">User 70</td>
<td class="tg-0lax">58 000</td>
</tr>
<tr>
<td class="tg-0lax">17</td>
<td class="tg-0lax">User 71</td>
<td class="tg-0lax">55 000</td>
</tr>
</tbody>
</table>
Please help to solve this problem.
You can use $loop variable as condition to write nedded classes to your rows.
Blade loop:
#foreach($jamisoni as $pay)
<tr class="
#if($loop->iteration < 6)
{{ 'td-text-green' }}
#elseif($loop->iteration < 11)
{{ 'td-text-yellow' }}
#elseif($loop->iteration < 16)
{{ 'td-text-red' }}
#endif
">
<td>{{$loop->iteration}}</td>
<td>{{$pay->name}}</td>
<td>{{$pay->amount}}</td>
</tr>
#endforeach
CSS:
.td-text-green td {color: green;}
.td-text-yellow td {color: yellow;}
.td-text-red td {color: red;}
#php $i=1;#endphp
#foreach($jamisoni as $pay)
#php
if($i<=5){
$color='tg-xdmp';
}
else if($i>=6 && $i<=10){
$color='tg-i99s';
}
else if($i>11 && $i<=15){
$color='tg-viqs';
}
else{
$color='tg-0lax';
}
$i++;
#endphp
<tr>
<td class="{{$color}}">{{$loop->iteration}}</td>
<td class="{{$color}}">{{$pay->name}}</td>
<td class="{{$color}}">{{$pay->amount}}</td>
</tr>
#endforeach
Define a $color variable and assign the color value at once. Once done just use it inside your <td> tag by specifying the class.

Find text in table and smoothly scroll to that position on table and also highlight this row

I have a simple table with some data and i want to scroll to a specific position based on date & highlight that row and based on the which day of Ramadan it is.
Let us say its 13 Ramadan which would be on 25-04-2021 then i have to scroll to that position and highlight the row in RED or any other color.
So far i am finding text and changing the color and i am doing same for scroll but scroll is not working not sure where i am doing it wrong..
This page feature is specially required for mobile version so that user is scroll to the right position on page etc
https://codepen.io/KGuide/pen/jOyLWNR
//$(window).scrollTop($("*:contains('05-05-2021'):last").offset().top);
//$(window).scrollTop($("*:contains('25-04-2021')").offset().top);
$(window).scrollTop($("*:contains('25-04-2021')"));
$("tr:contains('25-04-2021')" ).css( "color", "red" );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-w ">
<table class="ramadan-table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Day</th>
<th scope="col">Ramadan</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Date" data-label="Date">13-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">1</td>
</tr>
<tr>
<td class="Date" data-label="Date">14-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">2</td>
</tr>
<tr>
<td class="Date" data-label="Date">15-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">3</td>
</tr>
<tr>
<td class="Date" data-label="Date">16-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">4</td>
</tr>
<tr>
<td class="Date" data-label="Date">17-04-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">5</td>
</tr>
<tr>
<td class="Date" data-label="Date">18-04-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">6</td>
</tr>
<tr>
<td class="Date" data-label="Date">19-04-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">7</td>
</tr>
<tr>
<td class="Date" data-label="Date">20-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">8</td>
</tr>
<tr>
<td class="Date" data-label="Date">21-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">9</td>
</tr>
<tr>
<td class="Date" data-label="Date">22-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">10</td>
</tr>
<tr>
<td class="Date" data-label="Date">23-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">11</td>
</tr>
<tr>
<td class="Date" data-label="Date">24-04-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">12</td>
</tr>
<tr>
<td class="Date" data-label="Date">25-04-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">13</td>
</tr>
<tr>
<td class="Date" data-label="Date">26-04-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">14</td>
</tr>
<tr>
<td class="Date" data-label="Date">27-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">15</td>
</tr>
<tr>
<td class="Date" data-label="Date">28-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">16</td>
</tr>
<tr>
<td class="Date" data-label="Date">29-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">17</td>
</tr>
<tr>
<td class="Date" data-label="Date">30-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">18</td>
</tr>
<tr>
<td class="Date" data-label="Date">01-05-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">19</td>
</tr>
<tr>
<td class="Date" data-label="Date">02-05-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">20</td>
</tr>
<tr>
<td class="Date" data-label="Date">03-05-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">21</td>
</tr>
<tr>
<td class="Date" data-label="Date">04-05-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">22</td>
</tr>
<tr>
<td class="Date" data-label="Date">05-05-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">23</td>
</tr>
<tr>
<td class="Date" data-label="Date">06-05-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">24</td>
</tr>
<tr>
<td class="Date" data-label="Date">07-05-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">25</td>
</tr>
<tr>
<td class="Date" data-label="Date">08-05-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">26</td>
</tr>
<tr>
<td class="Date" data-label="Date">09-05-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">27</td>
</tr>
<tr>
<td class="Date" data-label="Date">10-05-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">28</td>
</tr>
<tr>
<td class="Date" data-label="Date">11-05-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">29</td>
</tr>
<tr>
<td class="Date" data-label="Date">12-05-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">30</td>
</tr>
</tbody>
</table>
</div>
Use $(window).scrollTop($("*:contains('25-04-2021')").parent('tr').offset().top);
Jquery scroll needs the offset of html tag.
Demo: https://jsfiddle.net/qtkwr7ny/

Loop through table and extract specifics cells

I am having difficulty using jQuery to loop though a table, then extract specifics cells.
I know this can be done with .each, I don't have a code to share as example but I am trying as we speak, I am just looking for some suggestions. I will share any code I can come up with.
What would be the best way to achieve this?
Code Snippet:
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
The result I want in array or variable:
Name1
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
===============
Name2
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
I know it sounds simple enough, but I am new to JavaScript so any examples/demos would be appreciated.
Note: There are no fixed values, Names keep changing and more rows are added.
You can select each row with class parent and then get the following two rows using jQuery's next() function. From the docs:
Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.
Also each HTML element should have a unique id. In your code you used the id row0 for 3 different elements which is just bad practice. If such cases are needed you should uses classes instead of ids.
The below snippet creates an array containing objects that hold the requested information. The extraction of these information depends on the order of the columns (specifically, I used the :nth-child() selector to get the desired cell). If the order of the columns will change over time, please consider adding descriptive classes to each cell and select based on these classes.
var entries = [];
$("#tablemain tr.parent").each(function(){
var child1 = $(this).next();
var child2 = child1.next();
var cells = {
name: $(this).find("td:nth-child(1)").text(),
arrival1: child1.find("td:nth-child(2)").text(),
departure: child2.find("td:nth-child(2)").text(),
arrival2: child1.find("td:nth-child(3)").text()
};
entries.push(cells);
});
console.log(entries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row01" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row02" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row11" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row12" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>

jquery change colors on dynamically created table by content

I have a div that is used to load a dynamically generated table.
So far I can generate the table and by using on("click" or "mouseover", function) achieve results but I need the table change when its loads.
At first I was using each() but it does not work on dynamic content so after reading more I changed it to on().
I don't want to click each cell for change to occur.
Code:
Jquery
$(function () {
$("#outputDiv2").on('click', "td", function () {
if ($(this).text() == 'notconnect') {
$(this).css('background-color', '#d5d5c3');
} else if ($(this).text() == 'connected') {
$(this).css('background-color', '#00e600');
} else if ($(this).text() == 'disabled') {
$(this).css('background-color', '#cc0000');
} else if ($(this).text() == 'err-disable') {
$(this).css('background-color', '#ff9900');
}
});
});
Example html table and script on jsfiddle
https://jsfiddle.net/frams/daknayhn/3/
You can use css classes for each type and when you dynamically create the table rows you can just assign the respective class for each row
.connected
{
background-color: #00e600
}
.err-disable
{
background-color: #ff9900
}
.disabled
{
background-color: #cc0000
}
.notconnect
{
background-color: #d5d5c3
}
<div id="outputDiv2">
<table border="1">
<tbody id="tableD">
<tr>
<td nowrap="">Port</td>
<td nowrap="">Name</td>
<td nowrap="">Status</td>
<td nowrap="">Vlan</td>
<td nowrap="">Duplex</td>
<td nowrap="">Speed </td>
<td nowrap="">Type
</td>
</tr>
<tr>
<td nowrap="">Fa0/1</td>
<td nowrap=""></td>
<td nowrap="" class="connected" >connected</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap="">10 </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/2</td>
<td nowrap=""></td>
<td nowrap="" class="connected">connected</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap="">10 </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/3</td>
<td nowrap=""></td>
<td nowrap="" class="notconnect">notconnect</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap=""> auto </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/4</td>
<td nowrap=""></td>
<td nowrap="" class="notconnect">notconnect</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap=""> auto </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/4</td>
<td nowrap=""></td>
<td nowrap="" class="notconnect">notconnect</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap=""> auto </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/4</td>
<td nowrap=""></td>
<td nowrap="" class="err-disable">err-disable</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap=""> auto </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
<tr>
<td nowrap="">Fa0/4</td>
<td nowrap=""></td>
<td nowrap="" class="disabled">disabled</td>
<td nowrap="">1</td>
<td nowrap="">auto</td>
<td nowrap=""> auto </td>
<td nowrap="">10/100BaseTX
</td>
</tr>
</tbody>
</table>
</div>
please try this code
$(function () {
$("#outputDiv2").delegate('click', "td", function () {
$('.notconnect').css('background-color', '#d5d5c3');
$('.connected').css('background-color', '#00e600');
$('.disabled').css('background-color', '#cc0000');
$('.err-disable').css('background-color', '#ff9900');
});
});

How to make a table cell input for a form

I have to submit in a form a value containing the value of a starting poker hand.
I thought to make a table with all the possible poker hands so the user can choose one from them.
This is the code I've written to create the table:
<table cellspacing="3" cellpadding="0" id="table">
<tbody>
<tr><td></td><td>A</td><td>K</td><td>Q</td><td>J</td><td>T</td><td>9</td><td>8</td><td>7</td><td>6</td><td>5</td><td>4</td><td>3</td><td>2</td></tr>
<tr class="row">
<td>A</td>
<td id="AA">AA</td>
<td id="AKs">AKs</td>
<td id="AQs">AQs</td>
<td id="AJs">AJs</td>
<td id="ATs">ATs</td>
<td id="A9s">A9s</td>
<td id="A8s">A8s</td>
<td id="A7s">A7s</td>
<td id="A6s">A6s</td>
<td id="A5s">A5s</td>
<td id="A4s">A4s</td>
<td id="A3s">A3s</td>
<td id="A2s">A2s</td>
</tr>
<tr class="row">
<td>K</td>
<td id="AKo">AKo</td>
<td id="KK">KK</td>
<td id="KQs">KQs</td>
<td id="KJs">KJs</td>
<td id="KTs">KTs</td>
<td id="K9s">K9s</td>
<td id="K8s">K8s</td>
<td id="K7s">K7s</td>
<td id="K6s">K6s</td>
<td id="K5s">K5s</td>
<td id="K4s">K4s</td>
<td id="K3s">K3s</td>
<td id="K2s">K2s</td>
</tr>
<tr class="row">
<td>Q</td>
<td id="AQo">AQo</td>
<td id="KQo">KQo</td>
<td id="QQ">QQ</td>
<td id="QJs">QJs</td>
<td id="QTs">QTs</td>
<td id="Q9s">Q9s</td>
<td id="Q8s">Q8s</td>
<td id="Q7s">Q7s</td>
<td id="Q6s">Q6s</td>
<td id="Q5s">Q5s</td>
<td id="Q4s">Q4s</td>
<td id="Q3s">Q3s</td>
<td id="Q2s">Q2s</td>
</tr>
<tr class="row">
<td>J</td>
<td id="AJo">AJo</td>
<td id="KJo">KJo</td>
<td id="QJo">QJo</td>
<td id="JJ">JJ</td>
<td id="JTs">JTs</td>
<td id="J9s">J9s</td>
<td id="J8s">J8s</td>
<td id="J7s">J7s</td>
<td id="J6s">J6s</td>
<td id="J5s">J5s</td>
<td id="J4s">J4s</td>
<td id="J3s">J3s</td>
<td id="J2s">J2s</td>
</tr>
<tr class="row">
<td>T</td>
<td id="ATo">ATo</td>
<td id="KTo">KTo</td>
<td id="QTo">QTo</td>
<td id="JTo">JTo</td>
<td id="TT">TT</td>
<td id="T9s">T9s</td>
<td id="T8s">T8s</td>
<td id="T7s">T7s</td>
<td id="T6s">T6s</td>
<td id="T5s">T5s</td>
<td id="T4s">T4s</td>
<td id="T3s">T3s</td>
<td id="T2s">T2s</td>
</tr>
<tr class="row">
<td>9</td>
<td id="A9o">A9o</td>
<td id="K9o">K9o</td>
<td id="Q9o">Q9o</td>
<td id="J9o">J9o</td>
<td id="T9o">T9o</td>
<td id="99">99</td>
<td id="98s">98s</td>
<td id="97s">97s</td>
<td id="96s">96s</td>
<td id="95s">95s</td>
<td id="94s">94s</td>
<td id="93s">93s</td>
<td id="92s">92s</td>
</tr>
<tr class="row">
<td>8</td>
<td id="A8o">A8o</td>
<td id="K8o">K8o</td>
<td id="Q8o">Q8o</td>
<td id="J8o">J8o</td>
<td id="T8o">T8o</td>
<td id="98o">98o</td>
<td id="88">88</td>
<td id="87s">87s</td>
<td id="86s">86s</td>
<td id="85s">85s</td>
<td id="84s">84s</td>
<td id="83s">83s</td>
<td id="82s">82s</td>
</tr>
<tr class="row">
<td>7</td>
<td id="A7o">A7o</td>
<td id="K7o">K7o</td>
<td id="Q7o">Q7o</td>
<td id="J7o">J7o</td>
<td id="T7o">T7o</td>
<td id="97o">97o</td>
<td id="87o">87o</td>
<td id="77">77</td>
<td id="76s">76s</td>
<td id="75s">75s</td>
<td id="74s">74s</td>
<td id="73s">73s</td>
<td id="72s">72s</td>
</tr>
<tr class="row">
<td>6</td>
<td id="A6o">A6o</td>
<td id="K6o">K6o</td>
<td id="Q6o">Q6o</td>
<td id="J6o">J6o</td>
<td id="T6o">T6o</td>
<td id="96o">96o</td>
<td id="86o">86o</td>
<td id="76o">76o</td>
<td id="66">66</td>
<td id="65s">65s</td>
<td id="64s">64s</td>
<td id="63s">63s</td>
<td id="62s">62s</td>
</tr>
<tr class="row">
<td>5</td>
<td id="A5o">A5o</td>
<td id="K5o">K5o</td>
<td id="Q5o">Q5o</td>
<td id="J5o">J5o</td>
<td id="T5o">T5o</td>
<td id="95o">95o</td>
<td id="85o">85o</td>
<td id="75o">75o</td>
<td id="65o">65o</td>
<td id="55">55</td>
<td id="54s">54s</td>
<td id="53s">53s</td>
<td id="52s">52s</td>
</tr>
<tr class="row">
<td>4</td>
<td id="A4o">A4o</td>
<td id="K4o">K4o</td>
<td id="Q4o">Q4o</td>
<td id="J4o">J4o</td>
<td id="T4o">T4o</td>
<td id="94o">94o</td>
<td id="84o">84o</td>
<td id="74o">74o</td>
<td id="64o">64o</td>
<td id="54o">54o</td>
<td id="44">44</td>
<td id="43s">43s</td>
<td id="42s">42s</td>
</tr>
<tr class="row">
<td>3</td>
<td id="A3o">A3o</td>
<td id="K3o">K3o</td>
<td id="Q3o">Q3o</td>
<td id="J3o">J3o</td>
<td id="T3o">T3o</td>
<td id="93o">93o</td>
<td id="83o">83o</td>
<td id="73o">73o</td>
<td id="63o">63o</td>
<td id="53o">53o</td>
<td id="43o">43o</td>
<td id="33">33</td>
<td id="32s">32s</td>
</tr>
<tr class="row">
<td>2</td>
<td id="A2o">A2o</td>
<td id="K2o">K2o</td>
<td id="Q2o">Q2o</td>
<td id="J2o">J2o</td>
<td id="T2o">T2o</td>
<td id="92o">92o</td>
<td id="82o">82o</td>
<td id="72o">72o</td>
<td id="62o">62o</td>
<td id="52o">52o</td>
<td id="42o">42o</td>
<td id="32o">32o</td>
<td id="22">22</td>
</tr>
</tbody></table>
</td></tr>
</table>
I'd like to allow the user to select his hand by clicking on it and then submit the value in the form. How can I achieve this?
Something like this? If you change the type of result into hidden you can submit the cards as a string.
To select a table cell you have to attach an event listener to it and keep track about what has been selected (or unselected again).
jQuery (within the $(document).ready() function, or after the table was created)
$('td').click(function(){
var hand = $(this).attr('id');
});
The number of possible poker hands is 2,598,960, so you don’t want to create a table of them. Instead, create a set of 52 items, each consisting of a check box and associated label, which identifies a card. Add JavaScript code to check that exactly 5 boxes have been selected when the form is submitted.

Categories