2012-04-11 2 views
1

Я имею grid view следующимКак суммировать и отображать общее в наклейке с помощью Javascript

Quantity Description Rate Total 
    1    ---   10  10 
    2    ---   20  40 

          Label outside the `gridview` 

Я написал JavaScript для отображения всего теперь я хотел бы, чтобы отобразить в общей сложности, как 10+40 и должен отображаться как 50, как будто у меня будут другие способы, что мне нужно, я хотел бы отобразить общую сумму on Blur событие quantity текстовое поле.

enter image description here

Мой код для отображения количества onblur событие выглядит следующим образом

<script type="text/javascript"> 
    function multiplication(txtQuantity, txtRate, txtAmount) { 
     var weight = document.getElementById(txtQuantity).value; 
     var rate = document.getElementById(txtRate).value; 
     document.getElementById(txtAmount).value = weight * rate; 
    } 
</script> 

В этом сценарии я хотел бы включить в общую

+0

[Пример?] (Http://jsfiddle.net/) –

+0

поделитесь некоторым чуваком кода, создайте небольшую рабочую демонстрацию на jsfiddle.net, как предложил Дерек. – codef0rmer

ответ

1

дать количество Textboxes имя, как «количество» , то вы можете получить их с:

document.getElementsByName("quantity"); 

дать ваш ярлык идентификатор, как «TOTAL», так что вы можете получить, что с:

document.getElementById("total") 

использовать событие OnLoad тела, чтобы добавить eventlisteners в ONBLUR случае ваше количество текстовых полей. И пока вы на него, используйте пространство имен, синглтона, так что вы не засорять глобальное пространство имен, например, так:

<script> 
    var p = { 
     onload: function() { 
      var els_qty = document.getElementsByName("quantity"); 
      for(var i = 0, ceiling = qty_els.length; i < ceiling; i++) { 
       qty_els[i].onblur = function() { 
        var total = 0; 
        for(var j = 0; j < ceiling; j++) { 
         total += Number(qty_els[j].value); 
        } 
        document.geTElementById("total").innerHTML = total; 
       } 
      } 
     } 
    }; 
</script> 

для добавления OnLoad EventListener, используйте следующее:

<body onload="p.onload()"> 

</body> 

Возможно, вы захотите выполнить некоторую проверку на количество текстовых полей, но я оставлю это до вас.

Смежные вопросы