Question

如果我有一个动态创建的输入列表，哪个ID被附加到每个输入的名称，那么获取每个行项目的值然后计算的最佳方法是什么？逐行总计，以及总计？

HTML：

<table>
<tr>
<td>
    <input type="text" name="CompetencyList[0].Score">
    <input type="text" name="SkillsList[0].Score">
    <input type="text" name="LineTotal">
</td>
</tr>
<tr>
<td>
    <input type="text" name="CompetencyList[1].Score">
    <input type="text" name="SkillsList[1].Score">
    <input type="text" name="LineTotal">
</td>
</tr>
<tr>
<td>
    <input type="text" name="CompetencyList[2].Score">
    <input type="text" name="SkillsList[2].Score">
    <input type="text" name="LineTotal">
</td>
</tr>
<tr>
<td>
    Grand Total: <input type="text" name="grandTotal"/>
</td>
</tr>

Answer 1

计算每一行

$('[name="LineTotal"]').val(function() {
    return $(this).closest('td').find('input').not(this).map(function() {
        return +this.value || 0;
    }).get().reduce(function(a, b) { return a + b });
});

一旦完成，你就要计算总数

$('[name="grandTotal"]').val(function() {
    return $('[name="LineTotal"]').map(function() {
        return +this.value;
    }).get().reduce(function(a, b) { return a + b });
});

$('input').on('input', calculate);

function calculate() {
    $('[name="LineTotal"]').val(function() {
        return $(this).closest('td').find('input').not(this).map(function() {
            return +this.value || 0;
        }).get().reduce(function(a, b) { return a + b });
    });

    $('[name="grandTotal"]').val(function() {
        return $('[name="LineTotal"]').map(function() {
            return +this.value;
        }).get().reduce(function(a, b) { return a + b });
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <input type="text" name="CompetencyList[0].Score">
            <input type="text" name="SkillsList[0].Score">
            <input type="text" name="LineTotal">
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="CompetencyList[1].Score">
            <input type="text" name="SkillsList[1].Score">
            <input type="text" name="LineTotal">
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="CompetencyList[2].Score">
            <input type="text" name="SkillsList[2].Score">
            <input type="text" name="LineTotal">
        </td>
    </tr>
    <tr>
        <td>
            Grand Total:
            <input type="text" name="grandTotal" />
        </td>
    </tr>
</table>

Answer 2

动态创建输入时，可以向每个输入添加一个类。然后，您可以使用jQuery获取具有此类的项目列表。例如：

<input type="text" class="myInput" name="CompetencyList[0].Score">
<input type="text" class="myInput" name="SkillsList[0].Score">
<input type="text" class="myInput" name="LineTotal">

在Javascript中

var myImputs = $(".myInput");

Answer 3

这是一个JS小提琴我怎么做... https://jsfiddle.net/cz6sgbyc/1/

我已将lineTotal，competencyScore和skillsScore的类添加到关联的输入中，并将“grandTotal”的ID添加到总计输入中。

使用Javascript：

function updateScores() {
    var grandTotal = 0;
  $('.lineTotal').each( function( index, input ) {
    var $parent = $(input).parent();
    var thisScore = parseFloat( $('.competencyScore',$parent).val() || 0 ) + parseFloat( $('.skillsScore',$parent).val() || 0 );
    grandTotal += thisScore;
    $(input).val( thisScore );
  });
  $('#grandTotal').val( grandTotal );
}

$(function() {
    $('input').change( updateScores );
});

HTML：

<table>
<tr>
<td>
    <input type="text" class="competencyScore" name="CompetencyList[0].Score">
    <input type="text" class="skillsScore" name="SkillsList[0].Score">
    <input type="text" class="lineTotal" name="LineTotal">
</td>
<td>
    <input type="text" class="competencyScore" name="CompetencyList[1].Score">
    <input type="text" class="skillsScore" name="SkillsList[1].Score">
    <input type="text" class="lineTotal" name="LineTotal">
</td>
<td>
    <input type="text" class="competencyScore" name="CompetencyList[2].Score">
    <input type="text" class="skillsScore" name="SkillsList[2].Score">
    <input type="text" class="lineTotal" name="LineTotal">
</td>
<td>
    Grand Total: <input type="text" id="grandTotal" name="grandTotal"/>
</td>
</tr>
</table>

如何从动态列表中计算值

3 个答案: