2017-05-18 3 views
0

저는 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>

+0

로 교체'NaN이는 == NaN'은! - 당신은 NaN'에게 값 ==='등으로 – barbsan

+0

가능한 중복을 확인할 수 없습니다 [문자가 숫자인지 확인 하시겠습니까?] (http://stackoverflow.com/questions/8935632/check-if-character-is-number) –

답변

0

이 문 if (value === NaN) { ... } JS에서 if (isNaN(value)) { ... }

+0

감사하지만 항상 같은 결과가 나타납니다 ... – ginette

+0

만약'if === NaN) { return trElement; } ' – Sventies

+0

동일 ... 작동하지 않습니다. – ginette