정수 배열 정렬 및 입력 값 표시

Question

많은 입력 필드가있는 웹 사이트가 있고 그 안에 데이터를 정렬하고 싶습니다. 당신이 볼 수 있듯이

, 나는 총 점수의 열을 정렬하고 MVP 입력 필드에 위치를하고 싶습니다. 이렇게하려면 자바 스크립트 함수 .sort();을 사용하려고 생각했습니다.

function sortmvp() { 
    var mvp = new Array(); 
    mvp[0] = parseInt(document.getElementById('p1_5h').value); 
    mvp[1] = parseInt(document.getElementById('p2_5h').value); 
    mvp[2] = parseInt(document.getElementById('p3_5h').value); 
    mvp[3] = parseInt(document.getElementById('p4_5h').value); 
    mvp[4] = parseInt(document.getElementById('p5_5h').value); 
    mvp[5] = parseInt(document.getElementById('p6_5h').value); 

    mvp.sort(); 
} 

그 p1_5h, p2_5h, p1_5h ... 총 컬럼의 입력이다. 이 시점에서 나는 배열에있는 데이터 만 정렬했지만 표시해야합니다.

문제는 위의 이미지에서 볼 수있는 올바른 입력 위치에 올바른 위치 (1,2,3,4 ...)를 표시하는 방법을 모르겠다는 것입니다. 어떠한 제안? 여기

당신은 테이블의 HTML 코드를 볼 수 있습니다 http://jsfiddle.net/ajLLU/1/

HTML

<fieldset class="a" style="width:90%"> 
    <legend><b>Individuals</b> 
    </legend> 
    <div style="height:240px;width:100%;overflow-y:scroll; border:1px solid #D8D8D8;"> 
     <form name="individszsz" action="individuals.js, update_gps();"> 
      <table id="tabini11" border="0" align="center" style="width:550px"> 
       <tr> 
        <td width="100px" valign="bottom"> 
         <p align="center"><b> Home Clan </b> 
         </p> 
        </td> 
        <td valign="bottom" width="50px"> 
         <p align="center"><b>GP1</b> 
         </p> 
        </td> 
        <td valign="bottom" width="50px"> 
         <p align="center"><b>GP2</b> 
         </p> 
        </td> 
        <td valign="bottom" width="50px"> 
         <p align="center"><b> GP3 </b> 
         </p> 
        </td> 
        <td valign="bottom" width="50px"> 
         <p align="center"><b> Total</b> 
         </p> 
        </td> 
        <td valign="bottom" width="50px"> 
         <p align="center"><b> Average</b> 
         </p> 
        </td> 
        <td valign="bottom"> 
         <p align="center"><b> MVP</b> 
         </p> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p1_1h" type="text" name="p1_1h" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p1_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p1_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p1_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p1_5h" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p1_6h" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp1" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p2_1h" type="text" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p2_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p2_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p2_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p2_5h" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p2_6h" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp2" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p3_1h" type="text" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p3_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p3_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p3_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p3_5h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p3_6h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp3" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p4_1h" type="text" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p4_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p4_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p4_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p4_5h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p4_6h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp4" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p5_1h" type="text" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p5_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p5_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p5_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p5_5h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p5_6h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp5" type="text" value="0" style="width:100" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p6_1h" type="text" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p6_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p6_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p6_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p6_5h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p6_6h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp6" type="text" value="0" style="width:100" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
      </table> 
      <table id="tabini12" border="0" align="center" style="width:550px"> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <p align="center"><b> Versus Clan </b> 
         </p> 
        </td> 
        <td valign="bottom" width="40px"> 
         <p align="center"><b>GP1</b> 
         </p> 
        </td> 
        <td valign="bottom" width="40px"> 
         <p align="center"><b>GP2</b> 
         </p> 
        </td> 
        <td valign="bottom" width="40px"> 
         <p align="center"><b> GP3 </b> 
         </p> 
        </td> 
        <td valign="bottom" width="40px"> 
         <p align="center"><b> Total</b> 
         </p> 
        </td> 
        <td valign="bottom" width="40px"> 
         <p align="center"><b> Average</b> 
         </p> 
        </td> 
        <td valign="bottom" width="40px"> 
         <p align="center"><b> MVP</b> 
         </p> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p1_1o" type="text" name="p1_1h" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p1_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p1_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p1_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p1_5o" type="text" value="0" style="width:100%" readonlyonchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p1_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp7" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p2_1o" type="text" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p2_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p2_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p2_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p2_5o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p2_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp8" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p3_1o" type="text" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p3_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p3_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p3_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p3_5o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p3_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp9" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p4_1o" type="text" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p4_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p4_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p4_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p4_5o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p4_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp10" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p5_1o" type="text" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p5_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p5_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p5_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p5_5o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p5_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp11" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
       <tr> 
        <td width="80px" valign="bottom"> 
         <input id="p6_1o" type="text" value="" style="width:100%"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p6_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p6_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p6_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p6_5o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="p6_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
        <td valign="bottom" width="40px"> 
         <input id="mvp12" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();"> 
        </td> 
       </tr> 
      </table> 
     </form> 
    </div> 
</fieldset> 

자바 스크립트 사실

function calc() { 
    var h1 = parseInt(document.getElementById('h1').value); 
    var h2 = parseInt(document.getElementById('h2').value); 
    var h3 = parseInt(document.getElementById('h3').value); 
    var o1 = parseInt(document.getElementById('o1').value); 
    var o2 = parseInt(document.getElementById('o2').value); 
    var o3 = parseInt(document.getElementById('o3').value); 

    var toth = h1 + h2 + h3; 
    var toto = o1 + o2 + o3; 

    document.getElementById('htot').value = toth; 
    document.getElementById('otot').value = toto; 


    document.getElementById('diff1').value = h1 - o1; 
    document.getElementById('diff2').value = h2 - o2; 
    document.getElementById('diff3').value = h3 - o3; 
    document.getElementById('difftot').value = toth - toto; 

    htot = document.getElementById('htot'); 
    otot = document.getElementById('otot'); 

    if (htot.value == otot.value) { 
     htot.style.color = 'blue'; 
     otot.style.color = 'blue'; 
    } else { 
     if (htot.value > otot.value) { 
      htot.style.color = 'green'; 
      otot.style.color = 'red'; 
     } else { 
      otot.style.color = 'green'; 
      htot.style.color = 'red'; 
     } 
    } 

    var totals = [], 
     indices = []; 
    for (var i = 0, i < 6; i++) { 
     totals[i] = parseInt(document.getElementById('p' + (i + 1) + '_5h').value, 10); 
     indices[i] = i; 
    } 
    indices.sort(function (a, b) { 
     return totals[a] - totals[b]; 
    }); 
    for (var i = 0; i < indices.length; i++) 
    document.getElementById('mvp' + (indices[i] + 1)).value = (i + 1); 

} 

Answer 1

는 총 값을 정렬 할하지 않습니다,하지만 자신의 각각 값으로 인덱스 . 그렇게하면 어떤 인덱스가 어느 필드에 속해 있는지 알 수 있습니다. @Bergi에 의해 허용 대답으로

var totals = [], 
    indices = []; 
for (var i=0; i<6; i++) { 
    totals[i] = parseInt(document.getElementById('p'+(i+1)+'_5h').value, 10); 
    indices[i] = i; 
} 
indices.sort(function(a, b) { 
    return totals[a] - totals[b]; 
}); 
for (var i=0; i<indices.length; i++) 
    document.getElementById('mvp'+(indices[i]+1)).value = (i+1); 

Answer 2

좋아, 같은 원칙이 나는 당신의 jsfiddle했다 잘하면 그것은 당신에게 더 아이디어를 제공합니다 (인라인 자바 스크립트와 CSS 제거)을 정리하고 다음 작업 예를 내놓았다 .

CSS

fieldset.a { 
    width: 90%; 
} 
fieldset.a legend { 
    font-weight: bold; 
} 
fieldset.a > div:nth-of-type(1) { 
    height: 240px; 
    width: 100%; 
    overflow-y: scroll; 
    border :1px solid #D8D8D8; 
} 
fieldset.a table { 
    border: 0; 
    text-align: center; 
    width: 550px; 
} 
fieldset.a td { 
    vertical-align: bottom; 
    text-align: center; 
    font-weight: bold; 
} 
fieldset.a thead td:nth-of-type(1) { 
    width: 100px; 
} 
fieldset.a thead td:nth-of-type(2) { 
    width: 50px; 
} 
fieldset.a thead td:nth-of-type(3) { 
    width: 50px; 
} 
fieldset.a thead td:nth-of-type(4) { 
    width: 50px; 
} 
fieldset.a thead td:nth-of-type(5) { 
    width: 50px; 
} 
fieldset.a thead td:nth-of-type(6) { 
    width: 50px; 
} 
fieldset.a thead td:nth-of-type(7) { 
    width: 50px; 
} 
fieldset.a input { 
    width: 100%; 
} 

HTML

<fieldset class="a"> 
    <legend>Individuals</legend> 
    <div> 
     <form name="individszsz" action=""> 
      <table id="tabini11"> 
       <thead> 
        <tr> 
         <td>Home Clan</td> 
         <td>GP1</td> 
         <td>GP2</td> 
         <td>GP3</td> 
         <td>Total</td> 
         <td>Average</td> 
         <td>MVP</td> 
        </tr> 
       </thead> 
       <tboby> 
        <tr> 
         <td> 
          <input id="p1_1h" type="text" name="p1_1h"> 
         </td> 
         <td> 
          <input id="p1_2h" type="text"> 
         </td> 
         <td> 
          <input id="p1_3h" type="text"> 
         </td> 
         <td> 
          <input id="p1_4h" type="text"> 
         </td> 
         <td> 
          <input id="p1_5h" type="text" readonly> 
         </td> 
         <td> 
          <input id="p1_6h" type="text" readonly> 
         </td> 
         <td> 
          <input id="mvp1" type="text" readonly> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input id="p2_1h" type="text"> 
         </td> 
         <td> 
          <input id="p2_2h" type="text"> 
         </td> 
         <td> 
          <input id="p2_3h" type="text"> 
         </td> 
         <td> 
          <input id="p2_4h" type="text"> 
         </td> 
         <td> 
          <input id="p2_5h" type="text" readonly> 
         </td> 
         <td> 
          <input id="p2_6h" type="text" readonly> 
         </td> 
         <td> 
          <input id="mvp2" type="text" readonly> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input id="p3_1h" type="text"> 
         </td> 
         <td> 
          <input id="p3_2h" type="text"> 
         </td> 
         <td> 
          <input id="p3_3h" type="text"> 
         </td> 
         <td> 
          <input id="p3_4h" type="text"> 
         </td> 
         <td> 
          <input id="p3_5h" type="text" readonly> 
         </td> 
         <td> 
          <input id="p3_6h" type="text" readonly> 
         </td> 
         <td> 
          <input id="mvp3" type="text" readonly> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input id="p4_1h" type="text"> 
         </td> 
         <td> 
          <input id="p4_2h" type="text"> 
         </td> 
         <td> 
          <input id="p4_3h" type="text"> 
         </td> 
         <td> 
          <input id="p4_4h" type="text"> 
         </td> 
         <td> 
          <input id="p4_5h" type="text" readonly> 
         </td> 
         <td> 
          <input id="p4_6h" type="text" readonly> 
         </td> 
         <td> 
          <input id="mvp4" type="text" readonly> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input id="p5_1h" type="text"> 
         </td> 
         <td> 
          <input id="p5_2h" type="text"> 
         </td> 
         <td> 
          <input id="p5_3h" type="text"> 
         </td> 
         <td> 
          <input id="p5_4h" type="text"> 
         </td> 
         <td> 
          <input id="p5_5h" type="text" readonly> 
         </td> 
         <td> 
          <input id="p5_6h" type="text" readonly> 
         </td> 
         <td> 
          <input id="mvp5" type="text" readonly> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input id="p6_1h" type="text"> 
         </td> 
         <td> 
          <input id="p6_2h" type="text"> 
         </td> 
         <td> 
          <input id="p6_3h" type="text"> 
         </td> 
         <td> 
          <input id="p6_4h" type="text"> 
         </td> 
         <td> 
          <input id="p6_5h" type="text"> 
         </td> 
         <td> 
          <input id="p6_6h" type="text"> 
         </td> 
         <td> 
          <input id="mvp6" type="text" readonly> 
         </td> 
        </tr> 
       </tboby> 
      </table> 
      <table id="tabini12"> 
       <thead> 
        <tr> 
         <td>Versus Clan</td> 
         <td>GP1</td> 
         <td>GP2</td> 
         <td>GP3</td> 
         <td>Total</td> 
         <td>Average</td> 
         <td>MVP</td> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td> 
          <input id="p1_1o" type="text" name="p1_1h"> 
         </td> 
         <td> 
          <input id="p1_2o" type="text"> 
         </td> 
         <td> 
          <input id="p1_3o" type="text"> 
         </td> 
         <td> 
          <input id="p1_4o" type="text"> 
         </td> 
         <td> 
          <input id="p1_5o" type="text" readonly"> 
         </td> 
         <td> 
          <input id="p1_6o" type="text" readonly> 
         </td> 
         <td> 
          <input id="mvp7" type="text" readonly> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input id="p2_1o" type="text"> 
         </td> 
         <td> 
          <input id="p2_2o" type="text"> 
         </td> 
         <td> 
          <input id="p2_3o" type="text"> 
         </td> 
         <td> 
          <input id="p2_4o" type="text"> 
         </td> 
         <td> 
          <input id="p2_5o" type="text" readonly> 
         </td> 
         <td> 
          <input id="p2_6o" type="text" readonly> 
         </td> 
         <td> 
          <input id="mvp8" type="text" readonly> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input id="p3_1o" type="text"> 
         </td> 
         <td> 
          <input id="p3_2o" type="text"> 
         </td> 
         <td> 
          <input id="p3_3o" type="text"> 
         </td> 
         <td> 
          <input id="p3_4o" type="text"> 
         </td> 
         <td> 
          <input id="p3_5o" type="text" readonly> 
         </td> 
         <td> 
          <input id="p3_6o" type="text" readonly> 
         </td> 
         <td> 
          <input id="mvp9" type="text" readonly> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input id="p4_1o" type="text"> 
         </td> 
         <td> 
          <input id="p4_2o" type="text"> 
         </td> 
         <td> 
          <input id="p4_3o" type="text"> 
         </td> 
         <td> 
          <input id="p4_4o" type="text"> 
         </td> 
         <td> 
          <input id="p4_5o" type="text" readonly> 
         </td> 
         <td> 
          <input id="p4_6o" type="text" readonly> 
         </td> 
         <td> 
          <input id="mvp10" type="text" readonly> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input id="p5_1o" type="text"> 
         </td> 
         <td> 
          <input id="p5_2o" type="text"> 
         </td> 
         <td> 
          <input id="p5_3o" type="text"> 
         </td> 
         <td> 
          <input id="p5_4o" type="text"> 
         </td> 
         <td> 
          <input id="p5_5o" type="text" readonly> 
         </td> 
         <td> 
          <input id="p5_6o" type="text" readonly> 
         </td> 
         <td> 
          <input id="mvp11" type="text" readonly> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input id="p6_1o" type="text"> 
         </td> 
         <td> 
          <input id="p6_2o" type="text"> 
         </td> 
         <td> 
          <input id="p6_3o" type="text"> 
         </td> 
         <td> 
          <input id="p6_4o" type="text"> 
         </td> 
         <td> 
          <input id="p6_5o" type="text" readonly> 
         </td> 
         <td> 
          <input id="p6_6o" type="text" readonly> 
         </td> 
         <td> 
          <input id="mvp12" type="text" readonly> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </form> 
    </div> 
</fieldset> 

자바 스크립트

function calc(e) { 
    var target = e.target, 
     inputs = target.parentNode.parentNode.getElementsByTagName("input"), 
     allTbodyInputs = target.parentNode.parentNode.parentNode.getElementsByTagName("input"), 
     length = 4, 
     positions = [], 
     total = 0, 
     average, 
     i; 

    for (i = 1; i < length; i += 1) { 
     total += parseInt(inputs[i].value, 10) || 0; 
    } 

    average = total/3; 
    inputs[4].value = total; 
    inputs[5].value = average.toFixed(2); 

    for (i = 0, length = allTbodyInputs.length; i < length; i += 1) { 
     if (/^p\d_6[ho]$/.test(allTbodyInputs[i].id)) { 
      positions.push({ 
       element: allTbodyInputs[i + 1], 
       value: parseFloat(allTbodyInputs[i].value) || 0 
      }); 
     } 
    } 

    positions.sort(function (a, b) { 
     if (a.value === b.value) { 
      return 0; 
     } 

     if (a.value > b.value) { 
      return -1; 
     } 

     return 1; 
    }) 


    for (i = 0, length = positions.length; i < length; i += 1) { 
     positions[i].element.value = i + 1; 
    } 
} 

var onChangeInputs = document.getElementsByTagName("input"), 
    length, 
    index; 

for (index = 0, length = onChangeInputs.length; index < length; index += 1) { 
    if (/^p\d_[234][ho]$/.test(onChangeInputs[index].id)) { 
     onChangeInputs[index].addEventListener("change", calc, false); 
    } 
} 

내가 성공을 거두었습니다 jsfiddle