<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" class="active"><a href="#"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Perhatian</a></li>
<li role="presentation"><a href="#"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Diagnosis</a></li>
<li role="presentation"><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>
<li role="presentation" ><a href="#"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Obat / Resep</a></li>
</ul>
</div>
<div class=" col-xs-12 col-sm-6 col-md-9">
<h3><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Perhatian</h3>
<div class="panel panel-default">
<div class="panel-heading"><h4>Daftar Perhatian</h4></div>
<table width="100%" class="table table-hover" id="">
<thead>
<tr >
<th>
Perihal
</th>
<th>
Deskripsi
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-name="item">
Alergi
</td>
<td data-name="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
<tr>
<td data-name="item">
OS pasca stroke
</td>
<td data-name="description">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
</tr>
<tr>
<td data-name="item">
<input type="text" name="item" placeholder="Perihal" class="form-control"/>
</td>
<td data-name="description">
<input type="text" name="description" placeholder="Deskripsi" class="form-control"/>
</td>
</tr>
</tbody>
</table>
<a id="add_row" class="btn btn-primary" style=" margin-left: 90%;">Simpan</a>
</br>
</br>
</div>
</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");
});
