<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 table-responsive">
<div style="float:left">
<a id="add_row" class="btn btn-primary addnewrow pull-left">Add Colum
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<table class="table table-bordered table-hover table-sortable" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
อันดับ
</th>
<th class="text-center">
ข้อความ
</th>
<th class="text-center">
Message
</th>
<th class="text-center">
จัดแนว
</th>
<th class="text-center">
ขนาดข้อความ
</th>
<th class="text-center">
รูปแบบ
</th>
<th class="text-center">
ประเภท
</th>
<th class="text-center">
สถานะ
</th>
<th class="text-center">
ลบ
</th>
</tr>
</thead>
<tbody>
<tr id='addr0' data-id="0" class="hidden">
<td data-name="button">
<button type="button" class="btn btn-success row-addsub">Add</button>
</td>
<td data-name="name">
<input type="text" name='name0' placeholder='Name' class="form-control"/>
</td>
<td data-name="mail">
<textarea type="text" name='massage' placeholder='Description' class="form-control"></textarea>
</td>
<td data-name="desc">
<textarea name="desc0" placeholder="Description" class="form-control"></textarea>
</td>
<td data-name="sel">
<select name="sel0">
<option value"">Select Option</option>
<option value"1">Option 1</option>
<option value"2">Option 2</option>
<option value"3">Option 3</option>
</select>
</td>
<td data-name="sel">
<select name="sel0">
<option value"">Select Option</option>
<option value"1">Option 1</option>
<option value"2">Option 2</option>
<option value"3">Option 3</option>
</select>
</td>
<td data-name="sel">
<select name="sel0">
<option value"">Select Option</option>
<option value"1">Option 1</option>
<option value"2">Option 2</option>
<option value"3">Option 3</option>
</select>
</td>
<td data-name="sel">
<select name="sel0">
<option value"">Select Option</option>
<option value"1">Option 1</option>
<option value"2">Option 2</option>
<option value"3">Option 3</option>
</select>
</td>
<td data-name="sel">
<select name="sel0">
<option value"">Select Option</option>
<option value"1">Option 1</option>
<option value"2">Option 2</option>
<option value"3">Option 3</option>
</select>
</td>
<td data-name="del">
<button name"del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>
</td>
</tr>
</tbody>
</table>
<table name="errortitle">
</table>
</div>
</div>
</div>
<script>
</script>
.table-sortable tbody tr {
cursor: move;
}
input.add {
-moz-border-radius: 4px;
border-radius: 4px;
background-color:#6FFF5C;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
box-shadow: 0 0 4px rgba(0, 0, 0, .75);
}
$(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(0) 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();
});
$('#tab_logic').on('click', "td button.row-remove", function() {
var current = $(this).parents("tr");
if(current.attr('id')){
// Parent
while(true){
var next = current.next();
if(next.length == 0 || next.attr('id')){
break;
}
next.remove();
}
current.remove();
}else{
//child
current.remove();
}
});
$(tr).find('td button.row-addsub').on("click", function() {
$( "tr" ).has( this ).after( '<tr><td></td><td><input type="text"/></td><td><input type="text"/></td><td>YOUR CODE HERE</td><td>YOUR CODE HERE</td><td>YOUR CODE HERE</td><td>YOUR CODE HERE</td><td>YOUR CODE HERE</td><td>YOUR CODE HERE</td><td><button class="btn btn-danger glyphicon glyphicon-remove row-remove"></button></td></tr>' );
});
});
// 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");
})
