застрял создать таблицу, добавить строку динамически - PullRequest
0 голосов
/ 06 мая 2020

Я создаю таблицу добавления строки динамически, но мой результат равен 3, а не 1, потому что я использую класс div и не использую таблицу (tr & td)?

пример

введите описание изображения здесь

Это мой javascript

<script type="text/javascript">
$(document).ready(function () {
var counter = 0;
$("#add").on("click", function () {
var newRow = $("div.rounded");
var cols = "";
cols += '<label>Paket </label><input type="text" class="form-control col-md-5" name="paket"><div class="invalid-feedback">Input paket bosz!' + counter + '</div></div>';
cols += '<label>Quantity </label><input type="text" class="form-control col-md-5" name="quantity"><div class="invalid-feedback">Input Quantity!' + counter + '</div></div>';
cols += '<label>Biaya </label><input type="text" class="form-control col-md-5" name="biaya"><div class="invalid-feedback">Input Biaya' + counter + '</div></div>';
newRow.append(cols);
$("div.rounded").append(newRow);
counter++;
});
$("div.rounded").on("click", function (event) {
$(this).closest("form-group").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
</script>

Это мой вид

Пакет Входной пакет bosz!
                    <div class="col-4" style="margin-right: -290px;">
                    <div class="form-group rounded">
                        <label class="ulang">Quantity </label>
                        <input type="text" class="form-control col-md-5" name="quantity">
                        <div class="invalid-feedback">
                            Input Quantity!
                        </div>
                    </div>

                    </div>
                    <div class="col-4" style="margin-right: -290px;">

                        <div class="form-group rounded">
                            <label class="ulang">Biaya </label>
                            <input type="text" class="form-control col-md-5" name="biaya">
                            <div class="invalid-feedback">
                                Input Biaya
                            </div>
                        </div>

                        <br><br><br> <!-- pembatasan antara add order now -->
                 </div>
...