"Dynamic Tree table "
Bootstrap 3.0.0 Snippet by zebertooth

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="//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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
.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);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
$(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));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

This is really cool. How would you add submit button to submit the text fields to a script or something?

acnewberry () - 6 years ago - Reply 0


Follow this link.

https://bootsnipp.com/user/snippets/WaQ7z

zebertooth (0) - 6 years ago - Reply 0


Thank you

acnewberry () - 6 years ago - Reply -1