자바 스크립트 : 테이블의 값을 비교하십시오.

Question

현재 JavaScript를 배우고 있으며 Codecademy 및 Codeschool의 일부 코스를 완료했습니다. JavaScript에서 함수를 작성하는 방법에 대해 조금 알았습니다. 나는 if else 문 등에 익숙하지만, 그저 잠깐 멈추는 것이 한가지 있습니다. 그래서 여러분들이 저를 도울 수 있고 그것이 어떻게 작동하는지 설명 할 수 있기를 바랍니다. 앞으로 나 자신을 사용하십시오. 나는 어제 하루 종일 검색하고 많은 일을 시도했지만 작동하지 않습니다.

일부 값 (jsfiddle 포함)이 포함 된 표가 있는데,이 값은 예제와 같이 정적이 아니며 매일 바뀝니다. 기본적으로 : 그것은 몇 시간 동안 일해야하고 몇 시간 동안 일했는지 보여주는 표입니다. 차이가 있는지 비교하기 위해 이러한 값을 비교해야합니다. 차이가있는 경우 확인 된 행에 X가 있어야합니다.

JSfiddle에서는 작동하지 않는 JavaScript를 몇 개 넣었습니다. 그러나 이것이 내가 어떻게 구현해야하는지에 대한 아이디어입니다. (나는 그것이 그 방향의 어떤 것이라는 점이 매우 긍정적이지만 다시 초보자입니다.)

JavaScript에서 아직 이해할 수없는 점은 HTML 페이지에서이 코드를 구현하여 작동하도록하는 것입니다. 내 비교 함수 내에서 테이블에서 특정 값을 얻는 방법을 모르겠다. 이해가된다면?

어쨌든,이 코드 http://jsfiddle.net/3JDQQ/1/

window.onload = function check(a, b){ /* a and b should represent Hours a and Hours b, this hasnt been declarated */ 
    for(i = 1; i <= id.length; i++){ /* id.lenght isnt a value I've declarated. */ 
     if(a != b){ 
      /* place nothing at check */ 
     } else { 
      /* place a X at check */ 
     } 
    } 
} 

전체 코드의 바이올린을 클릭합니다. 거기에 넣은 값은 정적이지만 동적이 될 것입니다. 그래서 페이지를로드 할 때마다이 숫자를 통과하는 함수가 필요합니다.

Answer 1

당신이 그것을 수행 window.onload

function check(a, b){ /* a and b should represent Hours a and Hours b, this hasnt been declarated */ 
    for(i = 1; i <= id.length; i++){ /* id.lenght isnt a value I've declarated. */ 
     if(a != b){ 
      /* place nothing at check */ 
     } else { 
      /* place a X at check */ 
     } 
    } 
} 

window.onload = function() { check(a,b); } // call it here. 

Answer 2

내부를 호출 한 후 외부 함수를 정의해야합니다

Fiddle

function check(){ 
    var table = document.getElementById("mytable"); 
    var difference; 

    for(var i=1; i<table.rows.length; i++){ 
     difference = (table.rows[i].cells[2].innerHTML*1) - (table.rows[i].cells[3].innerHTML*1); 
     table.rows[i].cells[4].innerHTML = difference; 
     table.rows[i].cells[5].innerHTML = difference == 0 ? '' : 'X'; 
    } 
} 

window.onload = check; 

주 :

페이지가로드
• 난 그냥 점점의 단순함에 대한 ID를 표했다 때 호출 할하려면 빠진 함수에 자바 스크립트
• 이전 check()에 설정하고 window.onload에 할당되어 있기 때문에
• 인라인 onload을 제거 이 데모에서는 핸들을 사용하지만 테이블을 가져 오려는 모든 방법 (예 : 클래스 이름)을 사용할 수 있습니다.
• 테이블 행을 반복하며 1부터 시작하여 헤더를 건너 뜁니다.
• 코드에 표시된 *1은 셀의 문자열 내용을 숫자로 변환하여 뺄셈을 수행합니다.완전성에 대한

---

의 jQuery 버전 :

Fiddle

$(function(){ 
    var table = $('#mytable'), difference; 

    table.find('tbody > tr').each(function(){ 
     difference = ($(this).find('td:eq(2)').text()*1) - ($(this).find('td:eq(3)').text()*1); 
     $(this).find('td:eq(4)').text(difference); 
     $(this).find('td:eq(5)').text(difference == 0 ? '' : 'X'); 
    }); 
}); 

참고 : 당신은 이미지로 X를 대체 할 경우, 대신 .text()의 .html()를 사용하거나 이미지 요소를 추가 .

Answer 3

작성하는 스크립트를 시각화하는 좋은 방법은 작동 원리를 설명하는 것입니다. 예를 들어

:

I 각 행으로 반복하여 칼럼에 2 열 출력의 차이에 3

일단을 Y 가치 컬럼 1 에 값 X를 비교해야

function compareCellValues() { 
 

 
    var rows = $("#comparisonTable").find("tbody tr"); //returns all table rows 
 

 
    rows.each(function() { //iterate over each row. 
 

 
    var thisRow = $(this), //this is the current row 
 
     hoursA = thisRow.find(".hoursA"), //this is the first value 
 
     hoursB = thisRow.find(".hoursB"); //this is the second value 
 

 
    if (hoursA.text() !== hoursB.text()) { 
 
     thisRow.find(".check").text("X"); 
 
    } 
 

 
    thisRow.find(".difference").text(parseInt(hoursA.text()) - parseInt(hoursB.text())); 
 

 
    }); 
 

 
} 
 

 
window.onload = compareCellValues();

table { 
 
    border-spacing: 0; 
 
    border-collapse: collapse; 
 
} 
 
thead { 
 
    display: table-header-group; 
 
} 
 
tr { 
 
    page-break-inside: avoid; 
 
} 
 
td, 
 
th { 
 
    padding: 0; 
 
} 
 
.table > thead > tr > th, 
 
.table > tbody > tr > th, 
 
.table > tfoot > tr > th, 
 
.table > thead > tr > td, 
 
.table > tbody > tr > td, 
 
.table > tfoot > tr > td { 
 
    padding: 8px; 
 
    line-height: 1.42857143; 
 
    vertical-align: top; 
 
    border-top: 1px solid #ddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table" id="comparisonTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>Name</th> 
 
     <th>Hours a</th> 
 
     <th>Hours b</th> 
 
     <th>Diffrence</th> 
 
     <th>Check</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Developer</td> 
 
     <td class="hoursA">3</td> 
 
     <td class="hoursB">1</td> 
 
     <td class="difference"></td> 
 
     <td class="check"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Developer</td> 
 
     <td class="hoursA">3</td> 
 
     <td class="hoursB">3</td> 
 
     <td class="difference"></td> 
 
     <td class="check"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Developer</td> 
 
     <td class="hoursA">3</td> 
 
     <td class="hoursB">2</td> 
 
     <td class="difference"></td> 
 
     <td class="check"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Developer</td> 
 
     <td class="hoursA">3</td> 
 
     <td class="hoursB">3</td> 
 
     <td class="difference"></td> 
 
     <td class="check"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

: 우리는 우리가 우리의 함수를 작성하기 시작 시각 것이있다

나는 간단하게하기 위해 jQuery를 사용했습니다 :

의 차이 값은 이제 hours a 및 hours b 값을 기준으로 계산됩니다.

또한 이름이 수행 할 기능을 반영하도록 함수 이름을 지정하십시오. 앞으로 체크를하고 싶은 것보다 더 많은 일을 할 수 있기 때문에 체크 만하는 것은 너무 일반적입니다.