3
Ich habe Schwierigkeiten, Zeilen zu 2 verschiedenen Tabellen dynamisch hinzuzufügen. Während es für die erste Tabelle gut funktioniert, kann ich das für die zweite Tabelle nicht replizieren. Ich weiß, dass es wahrscheinlich etwas mit JS zu tun hat, aber ich bin nicht in der Lage, den genauen Fehler herauszufinden.Zeilen dynamisch zu 2 verschiedenen Tabellen im selben HTML hinzufügen
Da Sie nicht dieselbe ID für verschiedene Elemente verwenden können, habe ich die IDs in JS geändert. Sollte ich Klasse statt ID verwenden? Wenn ja, wie mache ich das genau?
$(document).ready(function() {
$("#add_badge").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();
});
});
// 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_badge").trigger("click");
});
$(document).ready(function() {
$("#add_tier").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();
});
});
// 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_tier").trigger("click");
});<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="dyn.js"></script>
<div class="jumbotron">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
Badge Name
</th>
<th class="text-center">
Badge ID
</th>
<th class="text-center">
Points required to earn the badge
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td data-name="badge_name">
<input type="text" name='badge_name0' placeholder='For ex: Fashion Queen' class="form-control" />
</td>
<td data-name="badge_id">
<input type="number" name='badge_id0' placeholder='For ex: 873200' class="form-control" />
</td>
<td data-name="badge_points">
<input type="number" name='badge_points0' placeholder='For ex: 500' class="form-control" />
</td>
<td data-name="del">
<button nam "del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<a id="add_badge" class="btn btn-default pull-left">Create new badge</a>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
Tier Name
</th>
<th class="text-center">
Tier ID
</th>
<th class="text-center">
Points required to earn the tier
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td data-name="tier_name">
<input type="text" name='tier_name0' placeholder='For ex: Gold' class="form-control" />
</td>
<td data-name="tier_id">
<input type="number" name='tier_id0' placeholder='For ex: 873200' class="form-control" />
</td>
<td data-name="tier_points">
<input type="number" name='tier_points0' placeholder='For ex: 500' class="form-control" />
</td>
<td data-name="del">
<button nam "del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<a id="add_tier" class="btn btn-default pull-left">Create new tier</a>
</div>
Sie nicht gleiche ID auf HTML-Seite haben. Bitte verwenden Sie stattdessen die Klasse oder verwenden Sie eine andere ID – Saurabh