如果用户输入的不是数字,则无论inputs.talert用户数如何,都会自动查找数字总和作为用户输入值

时间:2014-12-30 17:21:50

标签: javascript jquery

html代码

<table>
    <thead>
        <th>Item</th>
        <th>Cost</th>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>
                <input type="text" class="elm" />
            </td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td>
                <input type="text" class="elm" />
            </td>
        </tr>
        <tr>
            <td>Item 3</td>
            <td>
                <input type="text" class="elm" />
            </td>
        </tr>
        <tr>
            <td>Item 4</td>
            <td>
                <input type="text" class="elm" />
            </td>
        </tr>
        <tr>
            <td>Item 5</td>
            <td>
                <input type="text" class="elm" />
            </td>
        </tr>
         <tr>
            <td>Total</td>
            <td>
                <label id="total">0</label>
            </td>
        </tr>
    </tbody>
</table>

jquery代码

$('body').on('keyup','.elm',function(){
var sum = 0;
  $('.elm').each(function() {
    if($(this).val() != '' && !isNaN($(this).val())){
        sum += parseInt($(this).val());
    }
  });

 $('#total').text(sum);
})

我使用了这个代码,但这仅适用于5个输入。但是我需要一个程序,它可以动态地添加无限数量的用户输入值并自动计算其输出总和,并在用户输入数字以外时提醒用户。修改我必须在这段代码中帮助我。提前谢谢你。

2 个答案:

答案 0 :(得分:0)

您可以使用以下代码添加带有输入的添加行。 在<table>

之后的HTML中

在JS中:

var $table = $('table');
var newRow = '<tr><td>Item {{num}}</td><td><input type="text" class="elm" /></td></tr>';
function addRow() {
  var count =$table.find('tr').length + 1;
  $table.append( newRow.replace( '{{num}}', count ) );
}

$('body').on('keyUp', '.elm', function(e) {
  e.preventDefault();
  var key = (e.keyCode) ? e.keyCode : e.which;
  if (key === 13) { //user pressed enter
    addRow();
  } else {
    $('.elm').each(function() {
      var val =$(this).val();
      if( val && !isNaN(val) ){
        sum += parseInt(val,10);
      }
    });
    $('#total').text(sum);
  }
});

答案 1 :(得分:0)

只需添加一个链接即可在表格下方生成新行,并将其放入js文件中:

$('a').on('click',function(){
    var itemNr = $('table tr').length;
    $('tbody').append('<tr><td>Item '+itemNr+'</td><td><input type="text" class="elm" /></td></tr>');
});

链接到正在运行的jsfiddle:http://jsfiddle.net/8s8f145n/

或者如果你想保留你的结构,你可以在它的最后一行“之前”插入它而不是“追加”它。

$('table tr:last').before('<tr><td>Item '+itemNr+'</td><td><input type="text" class="elm" /></td></tr>');