Question

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

现在，如果我添加小时数（如2）并添加每小时的价格（如20），则代码必须计算将成为小计的价格。之后它计算出＆＃34; BTW＆＃34; （税）并将其添加到总价的小计中。

我想要的是添加具有唯一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方法可以实现您期望的行为

＆＃13;

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;
            }


        }

    }



}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

非常简单。 Frist创建元素示例：

＆＃13;

var input = $("<input/>").attr({
    name: 'EmailSend',
    type: 'text',
    value: true,
    class: "YOURClass"
    id: "YouRid"
});

＆＃13;

将您的crated输入附加到您的wish元素。例如：$（＆＃34; .table-body＆＃34;）。append（input）

Answer 3

通过Javascript在DOM中添加项目

要使用Native Javascript在表格中添加新项目，您必须使用以下其中一项

如果你想使用jQuery，那么你可以尝试

向DOM项目添加自定义属性

如果要在DOM元素上添加新属性，可以使用

使用Native Javascript完成

element.setAttribute(name, value);

或使用jQuery

.attr();

循环播放项目

现在为了处理＆＃34;每次这些新值，您需要遍历所有输入并进行计算。迭代可以通过使用

在Native Javascript中完成

Element.getElementsByTagName()如果所有输入都应在表格中处理。
Document.getElementsByClassName()如果您为每个输入指定了特定的类，则只会处理这些类。

或者如果你想使用jQuery，你可以继续

jQuery.each()

添加具有唯一ID的动态输入字段，用于计算

3 个答案: