Question

我有一个正在运行的代码片段，可以动态地将输入框添加到工作得很好的表单中，但是，我试图从输入框中获取值的总和，但似乎没有任何工作。总面积仅显示为0但未给出正确的结果。

这是我的代码：

用表格显示表格的JAVASCRIPT

$(document).ready(function(){

 $(document).on('click', '.add', function(){
  var html = '';
  html += '<tr>';
  html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>';
  html += '<td><input class="qty" type="text" value="0" data-cubics="500"/></td>';
  html += '<td><select name="item_unit[]" class="form-control item_unit"><option value="">Select Unit</option><?php echo fill_unit_select_box($connect); ?></select></td>';
  html += '<td width="33%"><span class="cubics"></span>';
  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
  $('#item_table').append(html);
 });

JAVASCRIPT做数学

<script>
function total() {
    var total1 = 0;
    $('span.cubics').each(function () {
        var n = parseFloat($(this).text());
        total1 += isNaN(n) ? 0 : n;
    });
    $('.totalcubics').text(total1.toFixed(2));
}

$('input.qty').keyup(function () {
    var val = parseFloat($(this).val());
    val = (val ? val * $(this).data('cubics') : '');
    $(this).closest('td').next().find('span.cubics').text(val);
    total();
});

var $form = $('#insert_form'),
    $summands = $form.find('input.qty'),
    $sumDisplay = $('span#totalquantity');

$form.keyup(function () {
    var sum = 0;
    $summands.each(function () {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay.text(sum);
});

$('input').on({
    focus: function () {
        if (this.value == '0') this.value = '';
    },
    blur: function () {
        if (this.value === '') this.value = '0';
    }
});
</script>

HTML代码以显示总数

     <tr class="bg">
            <td width="33%">TOTAL</td>
            <td width="33%"><span id="totalquantity"></span>

            </td>
            <td width="33%"><span class="totalcubics"></span>

            </td>
        </tr>

非常感谢对我的问题的任何帮助

Answer 1

每次向表中添加行时，都需要重新创建$summands。添加行后插入行以执行此操作。

＆＃13;

$(document).ready(function() {

 $(document).on('click', '.add', function() {
  var html = '';
  html += '<tr>';
  html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>';
  html += '<td><input class="qty" type="text" value="0" data-cubics="500"/></td>';
  html += '<td><select name="item_unit[]" class="form-control item_unit"><option value="">Select Unit</option><?php echo fill_unit_select_box($connect); ?></select></td>';
  html += '<td width="33%"><span class="cubics"></span>';
  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
  $('#item_table').append(html);
  $summands = $form.find('input.qty'); //***************  add this line
 });

function total() {
    var total1 = 0;
    $('span.cubics').each(function () {
        var n = parseFloat($(this).text());
        total1 += isNaN(n) ? 0 : n;
    });
    $('.totalcubics').text(total1.toFixed(2));
}

$('input.qty').keyup(function () {
    var val = parseFloat($(this).val());
    val = (val ? val * $(this).data('cubics') : '');
    $(this).closest('td').next().find('span.cubics').text(val);
    total();
});

var $form = $('#insert_form'),
    $summands = $form.find('input.qty'),
    $sumDisplay = $('span#totalquantity');

$form.keyup(function () {
    var sum = 0;
    $summands.each(function () {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });
    $sumDisplay.text(sum);
});

$('input').on(
{
    focus: function () {
        if (this.value == '0') this.value = '';
    },
    blur: function () {
        if (this.value === '') this.value = '0';
    }
});

});  // end of document ready

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="insert_form" onsubmit="return false">
  <table>
     <tr class="bg">
        <td width="33%">TOTAL</td>
        <td width="33%"><span id="totalquantity"></span></td>
        <td width="33%"><span class="totalcubics"></span></td>
     </tr>
  </table> 
  <button type="button" class="add">add</button>

   <table id="item_table">
   </table>
</form>

＆＃13;

在创建没有元素的summands集合时，在添加任何行之前。

Answer 2

我认为你的问题在

$(this).closest('td').next().find('span.cubics').text(val);

这意味着转到下一个td并找到span并且下一个td没有跨度..您可以使用

$(this).closest('tr').find('span.cubics').text(val);

或

$(this).closest('td').next().next().find('span.cubics').text(val);

当您动态追加行时，您需要使用

$(document).on('keyup' , 'input.qty' , function () {

而不是

$('input.qty').keyup(function () {

Answer 3

在@ tracktor53的帮助下，我设法解决了我的问题，下面是我更新的代码;

class BetFilter(django_filters.FilterSet):
    # Some other filters

    bookie = django_filters.ModelMultipleChoiceFilter(
        label=_("Bookie"),
        method='bookie_filter',
        queryset=Bet.objects.all()
    )

    def bookie_filter(self, qs, name, value):
        """
        Override the filter method in order to lookup for more than one field.

        :param qs:
        :param name:
        :param value:
        :return:
        """
        if not value:
            return qs

        if self.request.user:
            return qs.filter(
                user=self.request.user,
                bookie__name=value
            )

        return qs.filter(name=value)

在@ mohamed的帮助下，这一行$(document).on('click', '.add', function(){ var html = ''; html += '<tr>'; html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>'; html += '<td><select name="item_unit[]" class="form-control item_unit"><option value="">Select Unit</option><?php echo fill_unit_select_box($connect); ?></select></td>'; html += '<td><input class="qty" type="text" value="0"/></td>'; html += '<td width="33%"><span class="cubics"></span>'; html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>'; $('#item_table').append(html); $summands = $form.find('input.qty'); //*************** added this line });正在寻找下一个$(this).closest('td').next().find('span.cubics').text(val);，实际上，下一个<td>是一个输入字段但不是一个<td>因此，我必须对此进行调整;

<span id='cubics'></span>

然后我必须使用

 html += '<td><input class="qty" type="text" value="0"/></td>';
  html += '<td width="33%"><span class="cubics"></span>';

而不是

$(document).on('keyup' , 'input.qty' , function () {

现在一切正常，只是我想将$('input.qty').keyup(function () {值与select option乘以此行;

qty input

非常欢迎任何有关此事的进一步协助

输入值未在keyUp上添加jquery

3 个答案: