Значения сумм динамически заполняемой таблицы

Я ищу способ суммирования значений столбцов, которые динамически добавляются в таблицу с помощью выпадающих меню, ссылающихся на глобальные массивы. Ниже приведен код, который я написал, и вот ссылка для примера функционирования: jsFiddle. Я новичок в JavaScript, и все, что я знаю, я преподаю, поэтому, пожалуйста, будьте терпеливы и заблаговременно за вашу помощь.Значения сумм динамически заполняемой таблицы

<!DOCTYPE html> 
<html> 
    <head> 
     <title> </title> 
     <script> 
      var x= ["",1,2,3,4,5,6,7,8,9,10]; 
      var y= ["",4,6,3,4,5,6,7,8,9,10]; 
      var z= ["",1,2,3,4,5,6,7,8,9,10]; 
    </script> 
    <script> 
     function fill(){ 
      var si= document.getElementById('ddone').selectedIndex; 
      if (si!==0){ 
       var a= x[si]; 
       var b= y[si]; 
       document.getElementById('one').innerHTML=a; 
       document.getElementById('two').innerHTML=b; 
      }}; 
     </script> 
     <script> 
     function fill2(){ 
      var si2= document.getElementById('ddtwo').selectedIndex;    
      if(si2!==0){ 
       var c=z[si2]; 
       var d=z[si2]; 
       document.getElementById('three').innerHTML=c; 
       document.getElementById('four').innerHTML=d; 
      }}; 
     </script> 
     <script> 
      function total(){ 
       var w= parseInt(document.getElementById('one').value,10); 
       var x= parseInt(document.getElementById('two').value,10); 
       var y=parseInt(document.getElementById('three').value,10); 
       var z= parseInt(document.getElementById('four').value,10); 
       document.getElementById('five').innerHTML=w+y; 
       document.getElementById('six').innerHTML=x+z; 
}; 
     </script> 
    </head> 
    <body> 
<select id='ddone' onchange= 'fill()'> 
    <option></option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
</select> 
<select id='ddtwo' onchange='fill2()'> 
    <option></option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
</select> 
<table border=1px width=25%> 
    <tr> 
     <td id='one'></td> 
     <td id='two'></td> 
    </tr> 
    <tr> 
     <td id='three'></td> 
     <td id='four'></td> 
    </tr> 
    <tr> 
     <td id='five'></td> 
     <td id='six'></td> 
    </tr> 
</table> 
<button id='button' onclick='total()'>total</button> 
</body> 
</html>

источник

2013-07-26 Kyle Snell

Хотите рассчитать суммы на столбец или всего в общей сложности? – jsalonen

Я хотел бы рассчитать суммы за столбец. Есть ли причина, по которой я не могу просто «получить» значения, которые заселяются в ячейки? –

переключатель value в innerHTML и ваш код будет работать отлично. См. Этот скрипт для доказательства: http://jsfiddle.net/Nt9nC/7/

источник

2013-07-26 17:43:55 jsalonen

Это сработало отлично! Большое спасибо. Просто чтобы я мог узнать, почему 'value' не работает? –

Значение относится к атрибуту value. Если бы у вас было поле ввода вместо простой ячейки, в этом случае работала бы «value». – jsalonen

Отлично, я понимаю. Спасибо. Этот сайт потрясающий. –

Способ, которым вы извлекаете целые числа в сумму, выглядит не так. Если вы хотите, чтобы получить текст внутри элемента td попробовать innerText, как это:

parseInt(document.getElementById('one').innerText,10)

источник

2013-07-26 17:26:41 Satyajit

Я тоже это пробовал, и 'innerText' не работает. он все равно возвращает «NaN». Однако, спасибо. –

Значения сумм динамически заполняемой таблицы

ответ

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