"Item list with details 2"
Bootstrap 3.3.0 Snippet by maurivanm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
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');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: