[英]Html/Javascript table with built in 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;
});
}
})();
在循環中,測試它是否為數字字段,然后對其進行處理:
if ((selected[k].innerText) && (/^\d+$/.test(selected[k].innerText))) {
total += parseInt(selected[k].innerText);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.