将输入值乘以数据值，然后对结果求和

时间：2017-05-22 23:39:05

标签： javascript jquery

我有九个输入文本，我需要将输入值乘以每个输入的数据值，然后对结果求和并在div上显示ir。

输入值-1 x 数据值-1 +
输入值-2 x 数据值-2 +
输入值-3 x 数据值-3

......直到9

我的代码以及我已经走了多远：

DEMO

＆＃13;
＆＃13; 
$(function() {
      $('.insert').on('keydown', '.quantity-input', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||/65|67|86|88/.test(e.keyCode)&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()});
    })
    

$(".quantity-input").change(function(){
if($(this).val()=="") $(this).val(0);
  var total = 0;
  $(".quantity-input").each(function(index,element){
    if ($(element).val()) {
      total+= parseInt($(element).val());
    }
  });
  $(".subtotal strong").text(total);
});

$('.quantity-input').keyup(function(event) {
		var b = $(this).val();
		var c = $(this).data('value');
		var d = b * c
		alert(d)
	});
＆＃13; 
table
{
  width: 100%;
}
table th
{
  text-align: center;
}
table td
{
  padding: 10px;
  width: 10%;
}
table td input
{
  width: 100%;
  text-align: center;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
    </tr>
    <tr>
      <td class="subtotal" colspan="9">subtotal: <strong>00</strong></td>
    </tr>
    <tr>
      <td class="total" colspan="9">Total: <strong>00</strong></td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

想法是更改输入，更新小计和总计。

$(".quantity-input").each小计内的

将是所有输入的总和，而所有输入的总数将是对应的数据值。

＆＃13;
＆＃13; 
$(function() {
  $('.insert').on('keydown', '.quantity-input', function(e) {
    -1 !== $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) || /65|67|86|88/.test(e.keyCode) && (!0 === e.ctrlKey || !0 === e.metaKey) || 35 <= e.keyCode && 40 >= e.keyCode || (e.shiftKey || 48 > e.keyCode || 57 < e.keyCode) && (96 > e.keyCode || 105 < e.keyCode) && e.preventDefault()
  });
})

$('.quantity-input').on('change', function(event) {
  if ($(this).val() == "") $(this).val(0);
  var subtotal = 0;
  var total = 0;
  $(".quantity-input").each(function(index, element) {
    if ($(element).val()) {
      subtotal += parseInt($(element).val());
      total += parseInt($(element).val() * $(this).data('value'));
    }
  });
  $(".subtotal > strong").text(subtotal);
  $(".total > strong").text(total);
});
＆＃13; 
table {
  width: 100%;
}

table th {
  text-align: center;
}

table td {
  padding: 10px;
  width: 10%;
}

table td input {
  width: 100%;
  text-align: center;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
    </tr>
    <tr>
      <td class="subtotal" colspan="9">subtotal: <strong>00</strong></td>
    </tr>
    <tr>
      <td class="total" colspan="9">Total: <strong>00</strong></td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

为简单起见，我使用input事件作为输入

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".quantity-input").on('input',function(){
    var subtotal = 0;
    var total = 0;
    $(".quantity-input").each(function(index,element){
      if ($(element).val()) {
        subtotal += parseInt($(element).val());
        total += parseInt($(element).val()) * parseInt($(element).data('value'));
      }

    });
    $(".subtotal strong").text(subtotal);
      $(".total strong").text(total);
  });
});
＆＃13; 
table
{
  width: 100%;
}
table th
{
  text-align: center;
}
table td
{
  padding: 10px;
  width: 10%;
}
table td input
{
  width: 100%;
  text-align: center;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
    </tr>
    <tr>
      <td class="subtotal" colspan="9">subtotal: <strong>00</strong></td>
    </tr>
    <tr>
      <td class="total" colspan="9">Total: <strong>00</strong></td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

  

其他信息您可以将事件函数input，change ...等结合起来

     

喜欢$(".quantity-input").on('input change',function(){

答案 2 :(得分：1)

我希望这是你想要实现的目标。

＆＃13;
＆＃13; 
$(function() {
    $('.insert').on('keydown', '.quantity-input', function(e) {
        -1 !== $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) || /65|67|86|88/.test(e.keyCode) && (!0 === e.ctrlKey || !0 === e.metaKey) || 35 <= e.keyCode && 40 >= e.keyCode || (e.shiftKey || 48 > e.keyCode || 57 < e.keyCode) && (96 > e.keyCode || 105 < e.keyCode) && e.preventDefault()
    });
})


$(".quantity-input").on('keyup', function() {
     if ($(this).val() == "") $(this).val(0);

    var subtotal = 0;
    var total = 0; // accounts for data attr values 
    $(".quantity-input").each(function(index, element) {
        element = $(element);
        if (element.val()) {
            subtotal += parseInt(element.val());
            total += parseInt(element.val()) * element.data('value');
        }
    });
    $(".subtotal strong").text(subtotal);
    $(".total strong").text(total);
});
＆＃13; 
table {
    width: 100%;
}

table th {
    text-align: center;
}

table td {
    padding: 10px;
    width: 10%;
}

table td input {
    width: 100%;
    text-align: center;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
            <th>9</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="insert">
                <input type="text" class="quantity-input" data-value="5" value="0">
            </td>
            <td class="insert">
                <input type="text" class="quantity-input" data-value="5" value="0">
            </td>
            <td class="insert">
                <input type="text" class="quantity-input" data-value="5" value="0">
            </td>
            <td class="insert">
                <input type="text" class="quantity-input" data-value="5" value="0">
            </td>
            <td class="insert">
                <input type="text" class="quantity-input" data-value="5" value="0">
            </td>
            <td class="insert">
                <input type="text" class="quantity-input" data-value="5" value="0">
            </td>
            <td class="insert">
                <input type="text" class="quantity-input" data-value="5" value="0">
            </td>
            <td class="insert">
                <input type="text" class="quantity-input" data-value="5" value="0">
            </td>
            <td class="insert">
                <input type="text" class="quantity-input" data-value="5" value="0">
            </td>
        </tr>
        <tr>
            <td class="subtotal" colspan="9">subtotal: <strong>00</strong></td>
        </tr>
        <tr>
            <td class="total" colspan="9">Total: <strong>00</strong></td>
        </tr>
    </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我试过阅读你的代码......但我发现它很混乱和尴尬。此代码应产生描述的结果。希望它有所帮助：）

var a = 0,
    b = 0,
    c = 0,
    d = 0;

$(".quantity-input").keyup(function(){
    $(".quantity-input").each(function(){
        // a holds value of input
        a = parseInt($(this).val()); 
        // b holds multiple of value and data-value
        b = a * $(this).data("value");
        console.log(b);
        // c holds subtotal
        c += a;
        // d holds total
        d += b;
    });
    $(".subtotal strong").html(c);
    $(".total strong").html(d);
});
相关问题
最新问题