内置计算器的Html / Javascript表

时间:2016-01-08 10:03:07

标签: javascript html html-table calculator

我得到了这个带有内置计算器功能的表,它可以从table的不同部分中进行选择,并在最后添加所有内容。但我的问题是,如果我用其中的字母而不是数字击中其中一个方格,计算器会中断,我该如何解决?

如何使第一个包含信息(汽车名称)不可点击,只有前5个方格。 表格代码:

 <table>
      <tr>
        <th bgcolor="b8cce4">Modell</td>
          <th>Trend</td>
            <th>Titanum</td>
              <th>Familiepakke</td>
                <th>Førerassistentpakke</td>
                  <th>Stilpakke</td>
                    <th>Sluttpris</td>
      </tr>
      <tr>
        <td bgcolor="b8cce4"><b>Kuga</b></td>
        <td>401000</td>
        <td>420000</td>
        <td>1000</td>
        <td>10200</td>
        <td>9200</td>
        <td>kr</td>
      </tr>
      <tr>
        <td bgcolor="b8cce4"><b>C-max</b></td>
        <td>320000</td>
        <td>335000</td>
        <td>1000</td>
        <td>9400</td>
        <td>3600</td>
        <td>kr</td>
      </tr>
      <tr>
        <td bgcolor="b8cce4"><b>Focus</b></td>
        <td>255000</td>
        <td>325000</td>
        <td>900</td>
        <td>12500</td>
        <td>9000</td>
        <td>kr</td>
      </tr>
      <tr>
        <td bgcolor="b8cce4"><b>Mondeo</b></td>
        <td>281000</td>
        <td>361000</td>
        <td>1100</td>
        <td>9900</td>
        <td>7200</td>
        <td>kr</td>
      </tr>

剧本:

   (function() {
      var tds = document.querySelectorAll('tr td:not(:last-child)');
      for (var td in tds) {
        tds[td].addEventListener('click', function(evt) {
          evt.target.classList.toggle('selected');
          var total = 0;
          var parentTr = evt.target.parentNode;
          var selected = parentTr.querySelectorAll('.selected');
          for (var k in selected) {
            if (selected[k].innerText) {
              total += parseInt(selected[k].innerText);
            }
          }
          parentTr.querySelector('td:last-child').innerText = total;
        });
      }
    })();

1 个答案:

答案 0 :(得分:0)

在你的循环中,测试它是否是一个数字字段,然后才处理它:

if ((selected[k].innerText) && (/^\d+$/.test(selected[k].innerText))) {
    total += parseInt(selected[k].innerText);
}