행의 입력 계산 후 총 열 합계 자바 스크립트

첫 번째로,이 분야를 시작한 사람들에게 감사드립니다 - 웹 개발. 특히 코딩이 굉장합니다. 나는 그것이 멋지다라고 생각한다. 글쎄, 나는 직업에 의해 토목 기술자이지만 취미로 자유 시간을 코딩하고있다. 이제는 내 팀뿐만 아니라 직장에서의 생산성을 향상시키기 위해 진지하게 생각하고 생각했습니다.행의 입력 계산 후 총 열 합계 자바 스크립트

나는 테이블을 개발했다. 나는 컬럼 5의 입력 값을 곱하여 7 번째 열의 "Amount"를 계산할 수있는 답변을 얻었습니다. 끝내주는 (미안하지만, 솔루션을 찾았을 때 너무 흥분했습니다) 6 열 & 6을 입력합니다.

하지만 막히게 된 곳은 (여러 번 시도해도 다른 솔루션이나 방법을 찾는 데에도 불구하고 좌절감을 느낀다.) 이것은 7 번째 열과 3 번째 행의 총 합계입니다. 합계는 'Nan'이 이상하다고합니다. 나는 틀림없이 어딘가에있어. 금액 열에 행의 총 합계를 가져올 수 없습니다.

내 질문을 읽어 주셔서 감사합니다. 귀하의 도움/의견/제안을 많이 부탁드립니다. 모든 개선 사항을 환영합니다.

내가 개발 한 코드로 연결되는 https://jsfiddle.net/sandz/bxj38zps/1/ 내 피들 사이트를 방문하십시오. 또는

$(this).find('.rowDataSd').each(function(i) { 
    totals[i] += parseInt($(this).html()); 
});

$(this).html()의 입력 필드 내의 값 테이블 셀에 입력 필드를 복귀하지 않기 때문이다

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<title>TABLE RETEST</title> 
</head> 
<body> 

    <div class="w3-container w3-padding-4x w3-indigo"> 
     <h2> 
      Table Testing 
     </h2> 
    </div> 

    <div class="w3-container w3-section w3-pale-green"> 
    <table class="w3-table-all" id="sum_table" width="300" border="1"> 
     <tr class="titlerow"> 
      <th>SN</th> 
      <th>DESCRIPTION</th> 
      <TH>UNIT</TH> 
      <TH>REQD QTY</TH> 
      <TH>AVAIL. QTY</TH> 
      <TH>RATE</TH> 
      <TH>AMOUNT</TH> 
      <TH>REMARKS IF ANY</TH> 
     </tr> 

     <tr> 
      <td>1</td> 
      <td>Steel</td> 
      <td>Ton</td> 
      <td>200</td> 
      <td><input id="a.qty" type="number" oninput="calculate()" /></td> 
      <td><input id="rate" type="number" oninput="calculate()" /></td> 
      <td class="rowDataSd"><input id="amt1" type="number" name="amount" /></td> 
      <td><input type="text" name=""></td> 
     </tr> 

     <tr> 
      <td>2</td> 
      <td>Cement</td> 
      <td>Bags</td> 
      <td>300</td> 
      <td><input id="qty2" type="number" oninput="calculate1()" /></td> 
      <td><input id="rate2" type="number" oninput="calculate1()" /></td> 
      <td class="rowDataSd"><input id="amt2" type="number" name="amount" /></td> 
      <td><input type="text" name=""></td> 
     </tr> 
     <tr class="totalColumn"> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td class="totalCol"><input type="button" onclick="Calculate()" value="calculate"> TOTAL:</td> 
      <td><input type="text" name=""></td> 
     </tr> 

    </table> 



    <script> 
     function calculate(){ 
      var x1 = document.getElementById('a.qty').value; 
      var x2 = document.getElementById('rate').value; 
      var x3 = document.getElementById('amt1').value; 
      var x4 = x1 * x2; 
      amt1.value = x4; 
     } 

     function calculate1() { 
      var y1 = document.getElementById('qty2').value; 
      var y2 = document.getElementById('rate2').value; 
      var y3 = document.getElementById('amt2').value; 
      var y4 = y1 * y2; 
      amt2.value = y4; 

     } 

          var totals = [0]; 

      $(document).ready(function() { 

      var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')"); 

      $dataRows.each(function() { 
      $(this).find('.rowDataSd').each(function(i) { 
      totals[i] += parseInt($(this).html()); 
       }); 
      }); 
      $("#sum_table td.totalCol").each(function(i) { 
      $(this).html("total:" + totals[i]); 
      }); 

      }); 

     </script> 
    </div> 

</body> 
</html>

출처

2016-06-24 Rookie_Coder

아래와. 이 비트를 수정하여 입력 필드를 반복하고 값을 가져옵니다.

// ".rowDataSd input" selects all inputs within elements that have class="rowDataSd" 
$(this).find('.rowDataSd input').each(function(i) { 
    // So "this" is now an input, so we can $(this).val() to get its value. 
    // And in case there is no value, parseInt will return NaN, so we default to 0 in this case 
    totals[i] += parseInt($(this).val()) || 0; 
});

출처

2016-06-24 07:04:23 moxn

Moxn을 발견해 주셔서 감사합니다. 나는 그 점을 알고있다. 좀 더 자세히 설명해 주시겠습니까? JSFiddle 또는 Anything that like, 아마도 당신이 마음을 쓰지 않는다면? 왜냐하면 나는 예를 보게 될 때까지 조금 더 오래 이해하기 때문입니다. 매우 감사. 감사. –

@Rookie_Coder, 변경 사항을 설명하기 위해 몇 가지 설명을 추가했습니다. 재미있게 – moxn

고마워요. 매우 감사. 건배. –

행의 입력 계산 후 총 열 합계 자바 스크립트

답변

관련 문제