"TindakanMedis with Status (old)"
Bootstrap 3.3.0 Snippet by chocomelks

<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"> <div class="row"> <div class=" well col-xs-6 col-md-3"> RM234567</br> <b>Permata Sari</b></br> 29 tahun / 23 Jan 1986 <hr> <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span> Dashboard</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> Rekam Medis</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Diagnosis</a></li> <li role="presentation" class="active"><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Tindakan Medis</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> Hasil Radiologi</a></li> </ul> </div> <div class=" col-xs-12 col-sm-6 col-md-9"> <h3><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Tindakan Medis</h3> <div class="panel panel-default"> <div class="panel-heading"><h4>Status Pasien</h4></div> <div class="row"> <div class="col-md-3" style=" margin-left: 30px;"> <div class="radio"> <label> <input type="radio" name="statsOption" id="statsRawatJalan" value="rawatJalan" checked> Rawat Jalan </label> </div> </div> <div class="col-md-7"> <div class="radio"> <label> <input type="radio" name="statsOption" id="statsRawatInap" value="rawatInap"> Rawat Inap <input type="text" class="form-control input-sm" id="roomNumber" placeholder="Nomor Kamar"> <div class="form-inline"> <small>Mulai</small> <input type="date" class="form-control input-sm" id="startFrom"> <small>Sampai </small><input type="date" class="form-control input-sm" id="endUntil"> </div> </label> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"><h4>Tindakan</h4></div> <table width="100%" class="table table-hover" id=""> <thead> <tr> <th> Waktu </th> <th width="30%"> Deskripsi </th> <th> Informasi Tambahan </th> </tr> </thead> <tbody> <tr> <td data-name="datetime"> 03/03/2015 09:23 AM </td> <td data-name="description"> Operasi jantung </td> <td data-name="additionalInformation"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elementum nisi nunc, quis consectetur magna condimentum et. In ultricies porta orci nec feugiat. </td> </tr> <tr> <td data-name="datetime"> <input type="datetime-local" name="date" class="form-control"> </td> <td data-name="description"> <input type="text" name="description" placeholder="Deskripsi" class="form-control"> </td> <td data-name="additionalInformation"> <textarea name="additionalInformation" placeholder="Informasi tambahan" class="form-control" rows="4"></textarea> </td> </tr> </tbody> </table> <a id="add_row" class="btn btn-primary" style=" margin-left: 90%;"> Simpan</a> </br> </br> </div> </div> </div>
$(document).ready(function() { $("#add_row").on("click", function() { // Dynamic Rows Code // Get max row id and set new id var newid = 0; $.each($("#tab_logic tr"), function() { if (parseInt($(this).data("id")) > newid) { newid = parseInt($(this).data("id")); } }); newid++; var tr = $("<tr></tr>", { id: "addr"+newid, "data-id": newid }); // loop through each td and create new elements with name of newid $.each($("#tab_logic tbody tr:nth(1) td"), function() { var cur_td = $(this); var children = cur_td.children(); // add new td and element if it has a nane if ($(this).data("name") != undefined) { var td = $("<td></td>", { "data-name": $(cur_td).data("name") }); var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val(""); c.attr("name", $(cur_td).data("name") + newid); c.appendTo($(td)); td.appendTo($(tr)); } else { var td = $("<td></td>", { 'text': $('#tab_logic tr').length }).appendTo($(tr)); } }); // add delete button and td /* $("<td></td>").append( $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>") .click(function() { $(this).closest("tr").remove(); }) ).appendTo($(tr)); */ // add the new row $(tr).appendTo($('#tab_logic')); $(tr).find("td button.row-remove").on("click", function() { $(this).closest("tr").remove(); }); }); // Sortable Code var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }; $(".table-sortable tbody").sortable({ helper: fixHelperModified }).disableSelection(); $(".table-sortable thead").disableSelection(); $("#add_row").trigger("click"); });

Related: See More

Questions / Comments: