저는 js의 초보자이며 다른 사람이 수량을 수정할 때 열을 계산하고 열의 총계를 계산할 때 js 코드를 작성하도록 도와주었습니다. 이 코드는 잘 작동하지만 2 가지가 아닙니다. 필드가 "nc"(html 예제의 26 행, 다른 텍스트가 될 수 있음)와 같은 텍스트 인 경우 NaN 결과를 얻지 만 텍스트가 표시되어야하며 기본값이 a 인 경우 10 진수 (예 : html 예에서 0,9 행 20). 이 두 가지 옵션을 해결하기 위해 코드를 어떻게 수정할 수 있습니까?NaN의 자바 스크립트 문제
(function() {
let table = document.querySelector('#nutrition')
let tBodyElems = table.querySelector('tbody')
let trElems = [...tBodyElems.querySelectorAll('tr')].map(tr => {
let td = [...tr.querySelectorAll('td')]
td.input = tr.querySelector('input')
td.tr = tr
return td
})
let tFoot = table.querySelector('tfoot')
let tFootTd = [...tFoot.querySelectorAll('td')]
const updateTotal = function() {
tFootTd.forEach((tdFoot, i) => {
if (i === 0) {
return
}
if (i === 1) {
let total = trElems.reduce((a, e) => {
return a + (parseInt(e.input.value))
}, 0)
tdFoot.textContent = total
} else {
let total = trElems.reduce((a, e) => {
return a + (parseFloat(e[i].dataset.curValue) || parseFloat(e.input))
}, 0)
tdFoot.textContent = Math.ceil(total * 1000)/1000
}
})
}
const updateRow = function(trElement) {
let value = parseFloat(trElement.input.value.replace(',', '.'))
if (value === NaN) {
return
}
[...trElement].splice(2).forEach(e => {
let newValue = Math.ceil(parseFloat(e.dataset.for100) * value)/100
e.textContent = newValue
e.dataset.curValue = newValue
})
}
const updateAll = function() {
trElems.forEach(updateRow)
updateTotal()
}
const debounce = function(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
window.addEventListener('DOMContentLoaded', updateAll)
trElems.forEach(tr => {
tr.input.addEventListener('keydown', debounce(() => {
updateRow(tr), updateTotal()
}, 250))
})
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="container">
<div class="row col-md-offset-2 col-md-14">
<table class="table table-striped" id="nutrition">
<thead>
<tr>
<th>Aliments</th>
<th>Poids (Gr)</th>
<th>Energie kJ</th>
<th>Energie kcal</th>
<th>Proteines</th>
</thead>
<tbody class="text-primary">
<tr>
<td>Pain grillé, domestique:</td>
<td><input type="text" value="20gr"></td>
<td data-for100="1430">1430</td>
<td data-for100="336">336</td>
<td data-for100="0,9">0,9</td>
</tr>
<tr>
<td>Cabillaud, cuit à la vapeur:</td>
<td><input type="text" value="40gr"></td>
<td data-for100="350">350</td>
<td data-for100="nc">nc</td>
<td data-for100="18.6">18,6</td>
</tr>
</tbody>
<tfoot>
<td>Total</td>
<td><strong>60gr</strong></td>
<td data-for100="350">350</td>
<td data-for100="82.7">82,7</td>
<td data-for100="18.6">18,6</td>
</tfoot>
</table>
</div>
</div>
</div>
로 교체'NaN이는 == NaN'은! - 당신은 NaN'에게 값 ==='등으로 – barbsan
가능한 중복을 확인할 수 없습니다 [문자가 숫자인지 확인 하시겠습니까?] (http://stackoverflow.com/questions/8935632/check-if-character-is-number) –