функциональность калькулятора JavaScript - PullRequest
Новая
       0

функциональность калькулятора JavaScript

0 голосов
/ 09 января 2012

Я работаю над проектом, в котором необходимы функциональные возможности калькулятора, и должна быть поддержка для добавления дополнительных значений через javascript, а также распечатывать сумму из всех чисел в документе. Введенные цифры должны быть двузначными. Пустые или нечисловые данные должны быть пропущены. Вот что у меня есть: 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Sum Calculator</title>
</head>
<body>
Number of Rows: <input type= text value=2 style="width:30px" maxlength=2 >&nbsp;&nbsp;<input type=button value='Change' onclick="" />
<br /><br />
<table cellspacing=0 cellpadding=4>
<tr><td>Number 1:</td><td><input value=20 style="width:30px" type=text  maxlength=2/></td></tr>
<tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text  maxlength=2/></td></tr>
<tr><td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td><td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td></tr>
</table>
<input type=button value='Recalculate Sum' onclick="" />
</body>
</html>

Любой совет, как я могу добавить еще одну строку в таблице с помощью javascript и рассчитать конечный результат всех полей в таблице? Заранее спасибо, Лазиале

1 Ответ

0 голосов
/ 10 января 2012

Довольно легко на самом деле.Сделайте это: 

  <table cellspacing=0 cellpadding=4>
     <tbody id="whateverId">
       <tr><td>Number 1:</td><td><input value=20 style="width:30px" type=text            maxlength=2/></td></tr>
       <tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text  maxlength=2/></td></tr>
       <tr><td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td><td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td></tr>
     </tbody>
  </table>

JS для создания: 

  var trEl = document.createElement('tr');
  trEl.setAttribute('attribute', 'value'); // replace that with what you need

  var tdEl = document.createElement('td');
  // Here set td attributes
  trEl.appendChild(tdEl);
  // And same for the input im to lasy to write.

  document.getElementById('whateverId').appendChild(trEl);

И ... вот и все.Сгруппируйте его по функции или как хотите.

На сумму вы просто делаете что-то вроде: 

  var s = 0;
  for (var i = 0; i < document.getElementById('whateverId').childNodes.length; i++)
  {
      s += document.getElementById(whateverId).childNodes[i].firstChild.firstChild.value; // Hope I counted the first childs right.... you get the point.
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...