javascript - 添加具有唯一 id 的动态输入字段以进行计数

Question

我正在编写一个代码来计算服务总价。

现在，如果我添加小时数(例如 2)并添加每小时价格(例如 20)，代码必须计算将成为小计的价格。之后，它计算“BTW”(税)并将其添加到总价的小计中。

我想要的是添加具有唯一 ID 的动态新输入字段，以便代码可以计算多个服务。因此，对于每项服务，您都会得到一个总金额，所有金额加起来就是小计。我现在的代码:

HTML

<table class="table-responsive table" id="table-diensten">

    <thead>
        <tr>
            <th>Time</th>
            <th>Service</th>
            <th>amount</th>
            <th>total</th>
            <th>BTW</th>
        </tr>
    </thead>
    <tbody class="table-body">
        <tr class="table-row">
            <td><input type="text" class="form-control" placeholder="time (in hours)" id="time" onchange="totalofferte()"></td>
            <td><input type="text" class="form-control" placeholder="service"></td>
            <td><input type="text" class="form-control" placeholder="Cost (per hour)" id="cost" onchange="totalofferte()"></td>
            <td>&euro; <span id="total">0,00</span></td>
            <td>21%</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td> </td>
            <td> </td>
            <td><strong>Subtotaal</strong></td>
            <td>&euro; <span id="subtotal">0,00</span></td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
            <td>21% BTW</td>
            <td>&euro; <span id="costbtw">0,00</span></td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
            <td class="table-total"><span class="total">Totaal</span></td>
            <td class="table-total"><span class="total">&euro; <span id="totalofferte">0,00</span></span></td>
            <td> </td>
        </tr>
    </tfoot>


</table>

<a href="#table-diensten" class="add-tablerow btn btn-default" >add new service</a>

JS

<script type="text/javascript">


function totalofferte() {

    var cost = document.getElementById('cost').value;
    var time = document.getElementById('time').value;

    if (cost > 0 && time > 0) {

        var total = cost * time;

        if (total > 0) {
            document.getElementById('total').innerHTML = total;

            var subtotal = total;

            if (subtotal > 0) {
                document.getElementById('subtotal').innerHTML = subtotal;

                var costbtw = subtotal / 100 * 21;

                document.getElementById('costbtw').innerHTML = costbtw;

                var totalofferte = subtotal + costbtw;

                document.getElementById('totalofferte').innerHTML = totalofferte;
            }


        }

    }



}

</script>

编辑:

忘记了我的 JQuery

$(".add-tablerow").click(function(){
    $( ".table-body" ).append("<tr class='table-row'><td><input type='text' class='form-control' placeholder='Tijd'></td><td><input type='text' class='form-control' placeholder='Omschrijving'></td><td><input type='text' class='form-control' placeholder='Kosten'></td><td>&euro; 0,00</td><td>21%</td></tr>");
});

Answer 1

使用 addNewRow 方法您可以实现您期望的行为

function addNewRow(){
  var presentRows = $("#table-diensten > tbody > tr");
  var newRowId = presentRows.length + 1;
  $("#table-diensten").append(
    '<tr id="' + newRowId + '">' + 
    '<td><input class="form-control" type="number" name="time_' + newRowId + '" id="time_' + newRowId + '"/></td>' +
    '<td><input class="form-control" type="number" name="service_' + newRowId + '" id="service_' + newRowId + '"/></td>' +
    '<td><input class="form-control" type="number" name="amount' + newRowId + '" id="amount' + newRowId + '"/></td>' +
    '<td></td>' +
    '<td></td>' +
    '</tr>'
  );
}

function totalofferte() {

    var cost = document.getElementById('cost').value;
    var time = document.getElementById('time').value;

    if (cost > 0 && time > 0) {

        var total = cost * time;

        if (total > 0) {
            document.getElementById('total').innerHTML = total;

            var subtotal = total;

            if (subtotal > 0) {
                document.getElementById('subtotal').innerHTML = subtotal;

                var costbtw = subtotal / 100 * 21;

                document.getElementById('costbtw').innerHTML = costbtw;

                var totalofferte = subtotal + costbtw;

                document.getElementById('totalofferte').innerHTML = totalofferte;
            }


        }

    }



}

.navigation {
  width: 300px;
}


.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mainmenu a {
  display: block;
  background-color: #CCC;
  text-decoration: none;
  padding: 10px;
  color: #000;
}


.mainmenu li:hover a,
.mainmenu li.active a {
    background-color: #C5C5C5;
}

.mainmenu li.active .submenu {
  display: block;
  max-height: 200px;
}

.submenu a {
  background-color: #999;
}


.submenu a:hover {
  background-color: #666;
}


.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-responsive table" id="table-diensten">

    <thead>
        <tr>
            <th>Time</th>
            <th>Service</th>
            <th>amount</th>
            <th>total</th>
            <th>BTW</th>
        </tr>
    </thead>
    <tbody class="table-body">
        <tr class="table-row">
            <td><input type="text" class="form-control" placeholder="time (in hours)" id="time" onchange="totalofferte()"></td>
            <td><input type="text" class="form-control" placeholder="service"></td>
            <td><input type="text" class="form-control" placeholder="Cost (per hour)" id="cost" onchange="totalofferte()"></td>
            <td>&euro; <span id="total">0,00</span></td>
            <td>21%</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td> </td>
            <td> </td>
            <td><strong>Subtotaal</strong></td>
            <td>&euro; <span id="subtotal">0,00</span></td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
            <td>21% BTW</td>
            <td>&euro; <span id="costbtw">0,00</span></td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
            <td class="table-total"><span class="total">Totaal</span></td>
            <td class="table-total"><span class="total">&euro; <span id="totalofferte">0,00</span></span></td>
            <td> </td>
        </tr>
    </tfoot>


</table>

<a href="#table-diensten" class="add-tablerow btn btn-default" onclick="addNewRow()">add new service</a>