CreativPur
Erfahrenes Mitglied
Hi,
ich habe eine dynamische Tabelle, wo ich die Tabelle klonen kann..
Nun möchte ich auf der gleichen Seite weitere dynamische Tabellen in der gleichen Form unterbringen.
Logischerweise muss ich allen Tabellen und den dazugehörigen Script einen anderen Namen, bzw. Id zuweisen, welches ich in Tabelle 2 auch getan habe..
Leider funktioniert nur die erste Tabelle. Die 2. Tabelle lässt sich über den Button
leider nicht klonen..
Welche Veränderungen bzw. Zuweisungen muss ich noch vornehmen ?
ich habe eine dynamische Tabelle, wo ich die Tabelle klonen kann..
HTML:
<div class="row clearfix">
<div class="col-md-12 table-responsive">
<br />
<table class="table table-bordered table-hover table_sortable_werdegang" id="tab_logic_werdegang">
<thead>
<tr >
<th class="text-left">
von
</th>
<th class="text-left">
bis
</th>
<th class="text-left">
Beschäftigt als..
</th>
<th class="text-left">
Bei der Firma
</th>
<th class="text-left">
In Ort
</th>
<th colspan="2" class="text-left">
Bemerkung
</th>
</tr>
</thead>
<tbody>
<tr id='werdegang' data-id="werdegang" class="">
<td data-name="werdegang_von">
<input type="text" name='werdegang_von' placeholder='von' class="form-control"/>
</td>
<td data-name="werdegang_bis">
<input type="text" name='werdegang_bis' placeholder='bis' class="form-control"/>
</td>
<td data-name="werdegang_beschaeftigt_als">
<input type="text" name='werdegang_beschaeftigt_als' placeholder='Beschäftigt als..' class="form-control"/>
</td>
<td data-name="werdegang_firma">
<input type="text" name='werdegang_firma' placeholder='Firma' class="form-control"/>
</td>
<td data-name="werdegang_ort">
<input type="text" name='werdegang_ort' placeholder='Ort' class="form-control"/>
</td>
<td data-name="werdegang_bemerkung">
<textarea name="werdegang_bemerkung" placeholder="Bemerkung" class="form-control"></textarea>
</td>
<td data-name="del">
<button nam"del_werdegang" class='btn btn-danger glyphicon glyphicon-remove row-remove btn-xs loeschen'></button>
<button nam"aendern_werdegang" class='btn btn-success glyphicon glyphicon-refresh btn-xs'></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<a id="add_row_werdegang" class="btn btn-success pull-right btn-xs">Weiteren beruflichen Werdegang</a>
Code:
$(document).ready(function() {
$("#add_row_werdegang").on("click", function() {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#tab_logic_werdegang 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_werdegang 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_werdegang tr').length
}).appendTo($(tr));
}
});
// add the new row
$(tr).appendTo($('#tab_logic_werdegang'));
$(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_werdegang tbody").sortable({
helper: fixHelperModified
}).disableSelection();
$(".table_sortable_werdegang thead").disableSelection();
$("#add_row_werdegang").trigger("click");
});
Nun möchte ich auf der gleichen Seite weitere dynamische Tabellen in der gleichen Form unterbringen.
Logischerweise muss ich allen Tabellen und den dazugehörigen Script einen anderen Namen, bzw. Id zuweisen, welches ich in Tabelle 2 auch getan habe..
HTML:
<div class="row clearfix">
<div class="col-md-12 table-responsive">
<br />
<table class="table table-bordered table-hover table_sortable_weiterbildung" id="tab_logic_weiterbildung">
<thead>
<tr >
<th class="text-left">
von
</th>
<th class="text-left">
bis
</th>
<th class="text-left">
Beschäftigt als..
</th>
<th class="text-left">
Bei der Firma
</th>
<th class="text-left">
In Ort
</th>
<th colspan="2" class="text-left">
Bemerkung
</th>
</tr>
</thead>
<tbody>
<tr id='werdegang' data-id="weiterbildung" class="">
<td data-name="weiterbildung_von">
<input type="text" name='weiterbildung_von' placeholder='von' class="form-control"/>
</td>
<td data-name="weiterbildung_bis">
<input type="text" name='weiterbildung_bis' placeholder='bis' class="form-control"/>
</td>
<td data-name="weiterbildung_beschaeftigt_als">
<input type="text" name='weiterbildung_beschaeftigt_als' placeholder='Beschäftigt als..' class="form-control"/>
</td>
<td data-name="weiterbildung_firma">
<input type="text" name='weiterbildung_firma' placeholder='Firma' class="form-control"/>
</td>
<td data-name="weiterbildung_ort">
<input type="text" name='weiterbildung_ort' placeholder='Ort' class="form-control"/>
</td>
<td data-name="weiterbildung_bemerkung">
<textarea name="weiterbildung_bemerkung" placeholder="Bemerkung" class="form-control"></textarea>
</td>
<td data-name="del">
<button nam"del_weiterbildung" class='btn btn-danger glyphicon glyphicon-remove row-remove btn-xs loeschen'></button>
<button nam"aendern_weiterbildung" class='btn btn-success glyphicon glyphicon-refresh btn-xs'></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<a id="add_row_weiterbildung" class="btn btn-success pull-right btn-xs">Weiteren beruflichen Werdegang</a>
Code:
$(document).ready(function() {
$("#add_row_weiterbildung").on("click", function() {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#tab_logic_weiterbildung 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_weiterbildung 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_weiterbildung tr').length
}).appendTo($(tr));
}
});
// add the new row
$(tr).appendTo($('#tab_logic_weiterbildung'));
$(tr).find("td button.row-remove").on("click", function() {
$(this).closest("tr").remove();
});
});
Leider funktioniert nur die erste Tabelle. Die 2. Tabelle lässt sich über den Button
HTML:
<a id="add_row_weiterbildung" class="btn btn-success pull-right btn-xs">Weiteren beruflichen Werdegang</a>
Welche Veränderungen bzw. Zuweisungen muss ich noch vornehmen ?