<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <table id="tableReport" class="table table-hover table-striped "> <tbody> <tr class="media" id="carga_30" data-id="30"> <td class="media-left"> <h2>30</h2> </td> <td class="media-body"> <h4 class="media-heading font-yellow text-bold hidden-xs">ELIAS DO CARMO DA SILVA</h4> <h4 class="media-heading font-yellow text-bold hidden-sm hidden-md hidden-lg hidden-xl">ELIAS SILVA</h4> <span><strong>Status:</strong> <span class="label label-info">Carregando</span></span> <span><strong>Tipo:</strong> Conjugada</span> <span class="hidden-xs"><strong>Origem:</strong> Frios Completa</span> <span class="hidden-xs"><strong>Valor:</strong> R$ 9.450,00</span> <span class="hidden-xs"><strong>Peso:</strong> 2.400 KG</span> <span class="hidden-xs"><strong>Cubage:</strong> 3 m³</span> </td> </tr> <tr class="media" id="carga_20" data-id="20"> <td class="media-left"> <h2>20</h2> </td> <td class="media-body"> <h4 class="media-heading font-yellow text-bold hidden-xs">CELIO JOAQUIM DA COSTA</h4> <h4 class="media-heading font-yellow text-bold hidden-sm hidden-md hidden-lg hidden-xl">CELIO COSTA</h4> <span><strong>Status:</strong> <span class="label label-info">Carregando</span></span> <span><strong>Tipo:</strong> Conjugada</span> <span class="hidden-xs"><strong>Origem:</strong> Complemento Horti</span> <span class="hidden-xs"><strong>Valor:</strong> R$ 9.450,00</span> <span class="hidden-xs"><strong>Peso:</strong> 2.400 KG</span> <span class="hidden-xs"><strong>Cubage:</strong> 3 m³</span> </td> </tr> <tr class="media" id="carga_10" data-id="10"> <td class="media-left"> <h2>10</h2> </td> <td class="media-body"> <h4 class="media-heading font-yellow text-bold hidden-xs">ELJHONNY FERREIRA BRAZ</h4> <h4 class="media-heading font-yellow text-bold hidden-sm hidden-md hidden-lg hidden-xl">ELJHONNY BRAZ</h4> <span><strong>Status:</strong> <span class="label label-info">Carregando</span></span> <span><strong>Tipo:</strong> Normal</span> <span class="hidden-xs"><strong>Origem:</strong> Seca Completa</span> <span class="hidden-xs"><strong>Valor:</strong> R$ 9.450,00</span> <span class="hidden-xs"><strong>Peso:</strong> 2.400 KG</span> <span class="hidden-xs"><strong>Cubage:</strong> 3 m³</span> </td> </tr> </tbody> </table> </div> </div> </div>

.container, .container-fluid { margin-top: 15px; } tr > td.media-left { width: 72px !important; height: 30px; padding: 0 10px; background-color: #eee; } .table .media .media-body > span { color: #999; } .table .media .media-body span strong { color: #777; }

jQuery(document).ready(function() { console.log('Document loaded...'); $('body').on ('click', '.container-fluid table.table tr.media', function (event) { console.log ('row clicked... ' +$(this).attr('data-id')) ; $(this).addClass ('success'); }); });