Question

我是一个jQuery / Javascript的业余爱好者，但是我需要构建这个计算器，在使用了很多教程，代码片段和本网站的示例代码之后，我将脚本放到需要的地方，除了一个非常令人难以置信的错误。

计算器旨在简单地计算1个或更多房间的长度x宽度，得到总数，然后将其加在一起作为最终总数。扭曲的是房间可以根据需要添加。

经过5天阅读帖子和抓网后，除了一个小问题外，几乎所有工作都得到了解决，那就是输入字段中没有显示添加的行总数。它会被计算，输入字段的值会更改为总值，但html不会显示它。

任何人都可以协助弄清楚为什么html值只显示在第一行而不是动态添加的行？

我的HTML

<div id="calculatorModal">
<table id="calctable">
    <thead>
        <tr>
            <th>Length:</th>
            <th>x</th>
            <th>Width:</th>
            <th>=</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr class="calculator-row calculator-row-template" id="calculator-row-1">
            <td><input name="length" id="length" class="length-input"></td>
            <td>x</td>
            <td><input name="width" id="width" class="width-input"></td>
            <td>=</td>
            <td><input name="totalsqmeters" class="total-output" value=""></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4" align="right">Final Total:   </td>
            <td><input id="alltotal" value=""></td>
        </tr>
    </tfoot>
</table>
<br>
<a href="#" onclick="cloneRow()">Add Row</a>
</div>

我的jQuery：

<script  type="text/javascript">
$('#calculatorModal table tbody').on('keyup', 'tr.calculator-row input', function () {
    var id = $(this).closest('tr.calculator-row').attr('id');
    calculateRow(id);
});

function floor (length, width) {
    return length * width;
}

function calculateTotal() {
    var arr = document.getElementsByName('totalsqmeters');
    var tot=0;

    for(var i=0;i<arr.length;i++) {
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }

    document.getElementById('alltotal').value = tot;
}

function calculateRow(id) {
    var rowTotal = 0;
    var list = $('#calculatorModal table tbody');
    var rowid = '#' + id;

    var lengthIn = $(rowid + ' .length-input').val();
    var widthIn = $(rowid + ' .width-input').val();

    rowTotal = floor(lengthIn, widthIn);

    $(rowid + ' .total-output').attr('value', rowTotal).append("#calctable");

    calculateTotal();
}

function cloneRow () {
    var i = $('.calculator-row').length + 1;
    var newRowId = 'calculator-row-' + i;

    rowTemplate = $("#calculatorModal table tbody tr:first").clone();

    var newRow = rowTemplate.clone().attr('id', newRowId);

    newRow.find("input").each(function() {
        $(this).val('');
    }).end().appendTo("#calctable");
}
</script>

以下是我的脚本的代码集：https://codepen.io/RonaldMathuray/pen/JWZLzL

Answer 1

请用我的jQuery版本替换它，因为它与jQuery 1.7.2

配合使用

Jquery：未在输入字段中显示的计算值

1 个答案: