<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 ----------> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /> <div id="example_wrapper" class="dataTables_wrapper"> <table id="myexample" class="display nowrap dataTable dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;"> <thead class="bg-gray"> <tr role="row"> <th class="text-center" scope="col" colspan="6">Wersja polska </th> <th class="text-center" scope="col" colspan="6">Wersja angielska</th> <th class="text-center" scope="col" colspan="1" rowspan="2">W sprawie</th> </tr> <tr role="row"> <th class="sorting_desc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 136px;" aria-sort="descending">Tytuł</th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 217px;">Data</th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 30px;"><h6>Op</h6></th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 30px;"><h6>Ak</h6></th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 30px;"><h6>Ed</h6></th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 30px;"><h6>Bł</h6></th> <th class="sorting_desc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 136px;" aria-sort="descending">Tytuł</th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 217px;">Data</th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 30px;"><h6>Op</h6></th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 30px;"><h6>Ak</h6></th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 30px;"><h6>Ed</h6></th> <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="" style="width: 30px;"><h6>Bł</h6></th> </tr> </thead> <tbody> <tr role="row" class="odd tr-show"> <td class="">1 [tytuł polski ulotki]</td> <td class="">17/02/02 11:31</td> <td class="">T</td> <td class="">T</td> <td class="">N</td> <td class="">N</td> <td class="">1 [tytuł polski ulotki]</td> <td class="">17/06/02 11:31</td> <td class="">T</td> <td class="">T</td> <td class="">N</td> <td class="">N</td> <td class=""><h6>NIE <small>(i)</small></h6></td> </tr> <tr role="row" class="odd"> <td class="">2 [tytuł polski ulotki]</td> <td class="">17/12/02 12:31</td> <td class="">T</td> <td class="">T</td> <td class="">N</td> <td class="">N</td> <td class="">2 [tytuł polski ulotki]</td> <td class="">17/01/12 15:01</td> <td class="">N</td> <td class="">N</td> <td class="">T</td> <td class="">T</td> <th class=""><h6>TAK <small>(i)</small></h6></th> </tr> <tr role="row" class="odd"> <td class="">3 [tytuł polski ulotki]</td> <td class="">17/08/02 15:01</td> <td class="">T</td> <td class="">N</td> <td class="">N</td> <td class="">T</td> <td class="">3 [tytuł polski ulotki]</td> <td class="">17/01/12 12:01</td> <td class="">N</td> <td class="">T</td> <td class="">T</td> <td class="">N</td> <th class=""><h6>NIE <small>(i)</small></h6></th> </tr> <tr role="row" class="odd"> <td class="">4 [tytuł polski ulotki]</td> <td class="">17/08/02 11:31</td> <td class="">N</td> <td class="">T</td> <td class="">T</td> <td class="">N</td> <td class="">4 [tytuł polski ulotki]</td> <td class="">17/01/12 10:01</td> <td class="">N</td> <td class="">N</td> <td class="">T</td> <td class="">T</td> <th class=""><h6>TAK <small>(i)</small></h6></th> </tr> </tbody> </table> <!--<tr class="add-here">--> <!--</tr>--> <!--<tr class="add-hiere">--> <!-- <td colspan="13">--> <!-- <ul>--> <!-- <li>Sprawa w której jest dana ulotka</li>--> <!-- <li>inna sprawa w której jest dana ulotka</li>--> <!-- </ul>--> <!-- </td>--> <!--</tr>--> </div> <div class="" id="updated_contacts"> <span>Przykładowy tekst 1</span> </div> <div class="addElement"> </div>

/*.bg-gray { background-color: #e2e2e2; }*/

$(document).ready(function(){ $('#myexample').DataTable( { "searching": false, paging: false }); $(".tr-show").click(function(){ // $("#myexample > tbody").append('<tr><td scope="col" colspan="13" rowspan="1">Rozwinięcie / dodanie dodatkowej treśći</td></tr>'); $("#updated_contacts").append($(".addElement span").clone()); }); });