We Keep Coding

show div or content by clicking next and prev till fixed stage using javascript/jquery

$(document).ready(function(){
$(".pr-calendar div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
if ($(".pr-calendar div:visible").next().length != 0)
$(".pr-calendar div:visible").next().show().prev().hide();
else {
$(".pr-calendar div:visible").hide();
$(".pr-calendar div:first").show();
}
return false;
});
$("#prev").click(function(){
if ($(".pr-calendar div:visible").prev().length != 0)
$(".pr-calendar div:visible").prev().show().next().hide();
else {
$(".pr-calendar div:visible").hide();
$(".pr-calendar div:last").show();
}
return false;
});
});
.f-d{
background-color: #01BC8C;
height: 220px;
border-radius: 10px;
padding: 1px;
}
.pr-calendar{
background-color: #01BC8C;
}
.see-upline{
background-color: #F89A15;
}
.lt-news{
background-color: #428BCA;
}
.upline-chart{
background-color: #EF706D;
}
.myprofit-calendar{
background: #CCC;
position: relative;
}
.prev-next-button {
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
transform: translateY(-50%);
}
#prev { left: 10px; }
#next { right: 10px; }
.pr-calendar table{
margin:0 auto;
width: 300px;
}
.pr-calendar table td{
padding: 5px;
color:#fff;
}
.text-center{
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="margin-bottom:30px;">
<div class="col-lg-3 margin_10 animated fadeInRightBig">
<div class="myprofit-calendar">
<div class="f-d pr-calendar">
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">July 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">August 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>5%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>9%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>17%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>15%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">September 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>2%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>5%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>15%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>11%</td>
</tr>
</tbody>
</table>
</div>
</div>
<a id="next" class="prev-next-button"><i class="fa fa-arrow-right"></i></a>
<a id="prev" class="prev-next-button"><i class="fa fa-arrow-left"></i></a>
</div>
</div>
</div>
I want to set july month div to show by default and after clicking next will show the august month max.But, when clicked prev button , I want to show to previous 11 months till september .In, other words, I want to make a profit calendar, which will show the profit percentage month wise that will start from july till jun , july is the beginning point. What code should I write, please someone help me

There a lot of different solutions for your problem.
I can suggest to use:
$(".pr-calendar div:visible").index()
The previous line will return the index of the month div in the set.
Another possibility is to test the content in the children h3 element.
A snippet based on the last idea is:
$(".pr-calendar div").each(function (idx, ele) {
$(this).toggle($(this).children('h3').text().toLowerCase().indexOf('july') != -1);
});
$("#next").click(function () {
if ($(".pr-calendar div:visible h3").text().toLowerCase().indexOf('august') == -1)
$(".pr-calendar div:visible").next().show().prev().hide();
else {
$(".pr-calendar div:visible").hide();
$(".pr-calendar div:first").show();
}
return false;
});
$("#prev").click(function () {
if ($(".pr-calendar div:visible h3").text().toLowerCase().indexOf('september') != -1) {
$(".pr-calendar div:visible").nextAll('div:eq(10)').show().end().hide();
return false;
}
if ($(".pr-calendar div:visible").prev().length != 0)
$(".pr-calendar div:visible").prev().show().next().hide();
else {
$(".pr-calendar div:visible").hide();
$(".pr-calendar div:last").show();
}
return false;
});
.f-d {
background-color: #01BC8C;
height: 220px;
border-radius: 10px;
padding: 1px;
}
.pr-calendar {
background-color: #01BC8C;
}
.see-upline {
background-color: #F89A15;
}
.lt-news {
background-color: #428BCA;
}
.upline-chart {
background-color: #EF706D;
}
.myprofit-calendar {
background: #CCC;
position: relative;
}
.prev-next-button {
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
transform: translateY(-50%);
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
.pr-calendar table {
margin: 0 auto;
width: 300px;
}
.pr-calendar table td {
padding: 5px;
color: #fff;
}
.text-center {
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row" style="margin-bottom:30px;">
<div class="col-lg-3 margin_10 animated fadeInRightBig">
<div class="myprofit-calendar">
<div class="f-d pr-calendar">
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">September 2016</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">October 2016</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">November 2016</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">December 2016</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">January 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">February 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">March 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">April 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">May 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">June 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">July 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">August 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>5%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>9%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>17%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>15%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">September 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>2%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>5%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>15%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>11%</td>
</tr>
</tbody>
</table>
</div>
</div>
<a id="next" class="prev-next-button"><i class="fa fa-arrow-right"></i></a>
<a id="prev" class="prev-next-button"><i class="fa fa-arrow-left"></i></a>
</div>
</div>
</div>

sorting doesn't work, datatable in bootstrap

I've got a problem with sorting my table. When I click on my table header, my table data don't sort. Even with using the "show 10/25/50 entries" and also the search bar.
I tried very long but seems not working. Here is my code. I don't is sit the plugin problem or my coding problem. I've tried many ways from the internet but all dont work. I'm running xampp locally with internet connection.
$(".contentContainer").css("min-height", $(window).height());
$("textarea").css("height", $(window).height() - 110);
$("textarea").keyup(function() {
$.post("updatediary.php", {
diary: $("textarea").val()
});
});
$(document).ready(function() {
$('#example').DataTable();
});
.navbar-brand {
font-size: 1.8em;
}
#topContainer {
background-image: url("background.jpg");
height: 400px;
width: 100%;
background-size: cover;
}
#topRow {
margin-top: 80px;
text-align: center;
}
#topRow h1 {
font-size: 300%;
}
.bold {
font-weight: bold;
}
.marginTop {
margin-top: 30px;
}
.center {
text-align: center;
}
.title {
margin-top: 100px;
font-size: 300%;
}
#footer {
background-color: #B0D1FB;
padding-top: 70px;
width: 100%;
}
,
marginBottom {
margin-bottom: 30px;
}
.appstoreImage {
width: 250px;
}
.table {
table-layout: fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">IT Services</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="collapse navbar-collapse">
<ul class= "navbar-nav nav pull-right">
<li class="active">Main</li>
<li>New Input</li>
<li>Log Out</li>
</div>
</div>
</div>
<div class="container">
<div class="jumpbotron">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td>Date</td>
<th>Subject</th>
<td>Details</td>
<td>Status</td>
<td>ticket id</td>
<td>Actions</td>
</tr>
</thead>
<?php
while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row.
{
$date=$row[2];
$subject=$row[3];
$detail=$row[4];
$status=$row[5];
$tickid=$row[0];
?>
<tbody method="post">
<td class="col-md-1"><?php print_r($date); ?></td>
<td class="col-md-1"><?php print_r($subject); ?></td>
<td class="col-sm-2"><?php print_r($detail); ?> </td>
<td class="col-md-1"><?php print_r($status); ?></td>
<td class="col-md-1"><?php echo $tickid ; ?></td>
<td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td>
</tbody>
<?php } ?>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
</body>

Change td elements to th in thead
Take tbody out of while loop
Add table row tr element inside while loop to enclose table cells

I think you must clean up your code a little bit like #Gyrocode.com said. Code below works.
$(document).ready(function() {
$('#example').DataTable();
});
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Subject</th>
<th>Details</th>
<th>Status</th>
<th>ticket id</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- start to loop here -->
<tr>
<td class="col-md-1">10/04/2017</td>
<td class="col-md-1">ABC</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">1546546</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">11/04/2017</td>
<td class="col-md-1">DEF</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5646156</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">12/04/2017</td>
<td class="col-md-1">ZXY</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">454658</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">OPQ</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">56446</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">ggg</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">52527</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rtr</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">2577</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rtfe</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">7254</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rggthg</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">7527</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">frgbf</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">52727</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">grege</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5872</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">gtehtehte</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5872</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<!-- end loop -->
<tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
Cleanup you your code:
$(document).ready(function() {
$('#example').DataTable();
});
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">IT Services</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav nav pull-right">
<li class="active">Main</li>
<li>New Input</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumpbotron">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Date</th>
<th>Subject</th>
<th>Details</th>
<th>Status</th>
<th>ticket id</th>
<th>Actions</th>
</tr>
</thead>
<tbody method="post">
<?php
while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row.
{
$date=$row[2];
$subject=$row[3];
$detail=$row[4];
$status=$row[5];
$tickid=$row[0];
?>
<tr>
<td class="col-md-1">
<?php print_r($date); ?>
</td>
<td class="col-md-1">
<?php print_r($subject); ?>
</td>
<td class="col-sm-2">
<?php print_r($detail); ?> </td>
<td class="col-md-1">
<?php print_r($status); ?>
</td>
<td class="col-md-1">
<?php echo $tickid ; ?>
</td>
<td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>

Add class to all <tr> by clicking checkbox

With this code, i get all the checkboxes checked:
$(".checkAllCheckboxes").click(function()
{
$('input:checkbox').not(this).prop('checked', this.checked);
});
With this, i add a class to the element, where the checkbox is in.
$(function()
{
$('.table_row_checkbox').on('change',function(){
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});
});
How can i add that class, in my first code, to all the elements, by clicking select all checkboxes?
Sorry, i dont mean that.
My generated table code looks like:
<table class="table table-hover table-bordered list">
<thead>
<tr>
<td style="width: 1px; text-align: center;"><input type="checkbox" class="checkAllCheckboxes" /></td>
<td style="text-align: center;">ID</td>
<td class="left">Név</td>
<td class="left">E-mail</td>
<td class="left">Telefonszám</td>
<td style="text-align: center;">Dátum</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor55">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="55" /></td>
<td style="text-align: center;">55</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="55" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
<tr id="sor54">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="54" /></td>
<td style="text-align: center;">54</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="54" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
</tbody>
</table>
In the first , theres the select all checkbox.

$(".checkAllCheckboxes").click(function()
{
$('input:checkbox').not(this).prop('checked', this.checked);
$('input:checkbox').each(function() {
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});;
});
$('.table_row_checkbox').on('change',function(){
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-bordered list">
<thead>
<tr>
<td style="width: 1px; text-align: center;"><input type="checkbox" class="checkAllCheckboxes" /></td>
<td style="text-align: center;">ID</td>
<td class="left">Név</td>
<td class="left">E-mail</td>
<td class="left">Telefonszám</td>
<td style="text-align: center;">Dátum</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor55">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="55" /></td>
<td style="text-align: center;">55</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="55" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
<tr id="sor54">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="54" /></td>
<td style="text-align: center;">54</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="54" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
</tbody>
</table>

Or, slightly shorter, see here fiddle (edited):
$(".checkAllCheckboxes").click(function()
{
$(this).closest('table').find('input:checkbox').prop('checked', this.checked)
.closest('tr').toggleClass('selected',this.checked)
});
The function does both, set the tickmarks and assigns/removes the classname to the parent-trs. As it turns out, the .not(this) and later .addSelf() were not even necessary to achieve the intended effect. I therefore removed them again ("Write less, do more").
.closest() is advantageous in cases where there might be nested tables (.parents() would find all parent tables)
.closest('tr') gets the trs you want to work on.
Well, the above does not quite do everything. It does not do the tr-class-handling when clicking on a "normal" checkbox. The following does:
$('input:checkbox').click(function()
{ var jqobj=$(this);
if (jqobj.hasClass('checkAllCheckboxes')) // extend the selection
{ jqobj=jqobj.closest('table').find('input:checkbox'); }
jqobj.prop('checked', this.checked).closest('tr')
.toggleClass('selected',this.checked);
});

this can also be used to acheive the same
$(".checkAllCheckboxes").click(function(){
if($(this).is(':checked')){
$(this).parents('tr').addClass('checked');
$('tbody tr').addClass('checked')
$('tbody input[type="checkbox"]').prop('checked',true)
}
else{
$(this).parents('tr').removeClass('checked');
$('tbody tr').removeClass('checked')
$('tbody input[type="checkbox"]').prop('checked',false)
}
});

Issues with ui bootstrap modal CSS and printing

I am creating a webpage using angularjs and ui bootstrap to create modals. Then I have javascript to print just the modal. However, I am having an issue with my CSS. Firstly, for some reason (most likely because my CSS is messed up) the text is extending outside the div they belong in. Specifically, the ingredients and nutrition facts within the div with the class "onerow" are extending below the div with the class "modal-body".
Here is the plunker: http://plnkr.co/edit/fxvD6MTvbEHsaonLR669?p=preview
Furthermore, I have some javascript to print just the modal pane. It seems to work except for the fact that for some reason the thick solid black borders in the nutrition facts become borders with rounded corners. Again, refer to the plunker to better see what I am talking about.
Here is the html that makes up the modal:
<div class="modal-header" id="modalHeader" style="text-align: center;">
<h3 class="modal-title">PLU# {{productData.PLU}} -- {{productData.Dept}}</h3>
</div>
<div class="modal-body" id="modalBody">
<div ng-show="!pluValid" style="text-align:center;">
PLU {{productData.PLU}} not found in Database
</div>
<div class="onerow" ng-show="pluValid">
<div class="col6">
<div style="text-align: center;">{{productData.Desc1}} {{productData.Desc2}}</div>
<br />
<br />
Ingredients:
<br />
{{productData.Ingredients}}
<br />
<br />
<br />
<div style="text-align: center;">
<b>UPC NUMBER</b>
<br />
{{productData.UPC}}
</div>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="!areFacts">
<table style="width:100%;" cellspacing:0 cellpadding:0>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts</td>
</tr>
<tr>
<td style="text-align: center;">N/A</td>
</tr>
</tbody>
</table>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="areFacts">
<table style="width:100%;" cellspacing:0; cellpadding:0;>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts<br /><br /></td>
</tr>
<tr>
<td>
Serving Size {{productData.ServSize}}
<br />
Servings Per Container {{productData.ServPer}}
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<div class="line">Amount Per Serving</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Calories
<div class="weight">{{productData.Calories}}</div>
</div>
<div style="padding-top: 1px; float: right;" class="labellight">Calories from Fat
<div class="weight">{{productData.CaloriesFat}}</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<br />
<div class="dvlabel" style="text-align: right;">% Daily Value<sup>*</sup></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Fat
<div class="weight">{{productData.TotalFat}}g</div>
</div>
<div class="dv">{{productData.PerFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Saturated Fat
<div class="weight">{{productData.SatFat}}g</div>
</div>
<div class="dv">{{productData.PerSatFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Trans Fat
<div class="weight">{{productData.TransFat}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Cholesterol
<div class="weight">{{productData.Cholesterol}}mg</div>
</div>
<div class="dv">{{productData.PerCholesterol}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Sodium
<div class="weight">{{productData.Sodium}}mg</div>
</div>
<div class="dv">{{productData.PerSodium}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Carbohydrates
<div class="weight">{{productData.Carbs}}g</div>
</div>
<div class="dv">{{productData.PerCarbs}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Dietary Fiber
<div class="weight">{{productData.Fiber}}g</div>
</div>
<div class="dv">{{productData.PerFiber}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Sugars
<div class="weight">{{productData.Sugars}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">
Protein
<div class="weight">{{productData.Protein}}g</div>
</div>
</div>
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" class="vitamins">
<tbody>
<tr>
<td>Vitamin A {{productData.VitA}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin C {{productData.VitC}}%</td>
</tr>
<tr>
<td>Calcium {{productData.Calc}}%</td>
<td style="text-align: center;">•</td>
<td>Iron {{productData.Iron}}%</td>
</tr>
<tr>
<td>Vitamin D {{productData.VitD}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin E {{productData.VitE}}%</td>
</tr>
<tr>
<td>Thiamine {{productData.Thia}}%</td>
<td style="text-align: center;">•</td>
<td>Riboflavin {{productData.Ribo}}%</td>
</tr>
<tr>
<td>Niacin {{productData.Niac}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B6 {{productData.VitB6}}%</td>
</tr>
<tr>
<td>Folate {{productData.Folate}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B12 {{productData.VitB12}}%</td>
</tr>
<tr>
<td>Biotin {{productData.Biotin}}%</td>
<td style="text-align: center;">•</td>
<td>Phosphorus {{productData.Phos}}%</td>
</tr>
<tr>
<td>Zinc {{productData.Zinc}}%</td>
<td style="text-align: center;">•</td>
<td>Magnesium {{productData.Mag}}%</td>
</tr>
<tr>
<td>Iodine {{productData.Iodine}}%</td>
<td style="text-align: center;">•</td>
<td>Copper {{productData.Copper}}%</td>
</tr>
<tr>
<td>Pantothenic Acid {{productData.Acid}}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="labellight">
*Percent Daily Values are based on a 2000 calories diet. Your daily values may be higher or lower depending on your calories needs.
<table border=0 width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%"> </td>
<td width="30%">Calories:</td>
<td width="20%" style="text-align:left">2000</td>
<td width="20%" style="text-align:left">2000</td>
</tr>
</table>
</div>
</div>
<div class="line labellight" style="width: 100%;">
<table border=0 cellspacing="0" cellpadding="0" style="width: 100%">
<tr>
<td width="30%">Total Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">65<i>g</i></td>
<td width="20%" style="text-align:left">80<i>g</i></td>
</tr>
<tr>
<td width="30%">Sat Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">20<i>g</i></td>
<td width="20%" style="text-align:left">25<i>g</i></td>
</tr>
<tr>
<td width="30%">Cholesterol</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
</tr>
<tr>
<td>Sodium</td>
<td>Less Than</td>
<td style="text-align:left">2400<i>mg</i></td>
<td style="text-align:left">2400<i>mg</i></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">Total Carbohydrates</td>
<td style="text-align:left">300<i>g</i></td>
<td style="text-align:left">375<i>g</i></td>
</tr>
<tr>
<td colspan="2"> Dietary Fiber</td>
<td style="text-align:left">25<i>g</i></td>
<td style="text-align:left">30<i>g</i></td>
</tr>
</table>
<div class="line">
Calories per gram:
<br />
Fat 9 - Carbohydrate 4 - Percent 4
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" ng-click="print()">Print</button>
<button class="btn btn-primary" type="button" ng-click="close()">Close</button>
</div>

The problem is the table content requires more then the div width.
A very simple fix to start with is using the overflow CSS property in the #nutritionfacts div.
#nutritionfacts {
border: 1px solid black;
padding: 3px;
font-family: 'Arial Black', sans-serif;
overflow: scroll;
}
As for the modal border-radius problem, you need to override the default .modal-content class which in bootstrap styles has a border-raidius: 6px rule.

Change color table when checkbox ticked

I'm using AdminLTE template ( Bootstrap ), and i want to change the color of the tr when my checkbox is ticked
<table id="example1" class="table table-bordered table-striped dataTable" aria-describedby="example1_info">
<thead>
<tr role="row">
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 295px;">
ID
</th>
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 295px;">
ID
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 430px;">
Sujet
</th>
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 295px;">
Nom du client
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 384px;">
Département
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 250px;">
Status
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending" style="width: 183px;">
Derniére reponse
</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="1" colspan="1">
ID
</th>
<th rowspan="1" colspan="1">
ID
</th>
<th rowspan="1" colspan="1">
Sujet
</th>
<th rowspan="1" colspan="1">
Client
</th>
<th rowspan="1" colspan="1">
Département
</th>
<th rowspan="1" colspan="1">
Statut
</th>
<th rowspan="1" colspan="1">
Derniere reponse
</th>
</tr>
</tfoot>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
12
</td>
<td class=" ">
Pb SQL
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-success">
SQL
</small>
</td>
<td class=" ">
<small class="label label-success">
Ouvert
</small>
</td>
<td class=" ">
30/09/2014 à 12h24
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
18
</td>
<td class=" ">
Pb FTP
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-danger">
Technique
</small>
</td>
<td class=" ">
<small class="label label-success">
Ouvert
</small>
</td>
<td class=" ">
30/09/2014 à 12h21
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
19
</td>
<td class=" ">
Quels sont vos DNS ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-danger">
Technique
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
30/09/2014 à 10h13
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
22
</td>
<td class=" ">
Facture #123456789
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-danger">
En attente Tech Niveau II
</small>
</td>
<td class=" ">
30/09/2014 à 07h34
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
123
</td>
<td class=" ">
Paiement reçu ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-primary">
En attente paiement
</small>
</td>
<td class=" ">
29/09/2014 à 23h45
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
90
</td>
<td class=" ">
Pb renouvellement
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 21h13
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
193
</td>
<td class=" ">
Un gay dans l'equipe ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-default">
Pour Nico
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 15h14
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
3045
</td>
<td class=" ">
Detail offre pro
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-primary">
Pré-vente
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 13h37
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
4567
</td>
<td class=" ">
Quel modes de paiement autorisez vous ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-primary">
Attente serivce commercial
</small>
</td>
<td class=" ">
29/09/2014 à 10h54
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
6789
</td>
<td class=" ">
Paiement non abouti
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-danger">
Technique
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 00h01
</td>
</tr>
</tbody>
</table>
I want to use JS but i don't know how to do :(
Tried this :
$("input[type=checkbox]").on("change", function() {
var $chk = $(this);
var isChecked = $chk.prop('checked');
if (isChecked) {
$chk.parent().addClass("info");
}
else {
$chk.parent().removeClass("info");
}
});
But doesn't work..
I really ned help :(
Thanks a lot ! ( I'm sorry if my english is bad, i am French :))) )

You are selecting the parent element which is a label, not the tr. Use closest to find the tr that the checkbox is in.
$("table tbody").on("change", "input[type='checkbox']", function() {
$(this).closest("tr").toggleClass("info", this.checked);
});

Js Fiddle
here you are giving the class .info for the label which is parent of <input>
$chk.parent().addClass("info");
you need to find the exact parent <tr> to add class
$chk.parents('tr').addClass("info");