Javascript幫助，表格和單選按鈕

Question

我是JavaScript新手，需要一些幫助。

看到圖像第一：

。

積分預測器應用程序。

基本上，當用戶選擇通過無線電按鈕 獲勝隊應該加10分給獲勝隊在點列和 以及基於所述點自動排序的表（行分選）的隊具有較高分更高的位置。

有沒有人有任何想法如何實現這一目標？

這裏的HTML：

<div> 
<table id="pointsTable" border="1" cellspacing="0" cellpadding="5"> 
    <tr> 
    <th scope="col">name</th> 
    <th scope="col">played</th> 
    <th scope="col">won</th> 
    <th scope="col">lost</th> 
    <th scope="col">points</th> 
    </tr> 
    <tr id="teamA"> 
    <td>team A</td> 
    <td>3</td> 
    <td>2</td> 
    <td>1</td> 
    <td id="teamApoints">20</td> 
    </tr> 
    <tr id="teamB"> 
    <td>team B</td> 
    <td>4</td> 
    <td>2</td> 
    <td>2</td> 
    <td id="teamBpoints">20</td> 
    </tr> 
    <tr id="teamC"> 
    <td>team C</td> 
    <td>3</td> 
    <td>1</td> 
    <td>2</td> 
    <td id="teamCpoints">10</td> 
    </tr> 
    <tr id="teamD"> 
    <td>team D</td> 
    <td>4</td> 
    <td>0;</td> 
    <td>4</td> 
    <td id="teamDpoints">0</td> 
    </tr> 
</table> 
</div> 
<div> 
<form> 
team A vs team C <br/> 
team A <input type="radio" name="winner" value="teamA" /> 
team C <input type="radio" name="winner" value="teamC" /> 
<br/> 
<br/> 
team B vs team D <br/> 
team B <input type="radio" name="winner" value="teamB" /> 
team D <input type="radio" name="winner" value="teamD" /> 
<br/> 
<br/> 
team A vs team D <br/> 
team A <input type="radio" name="winner" value="teamA" /> 
team D <input type="radio" name="winner" value="teamD" /> 
<br/> 
<br/> 
team B vs team C <br/> 
team B <input type="radio" name="winner" value="teamB" /> 
team C <input type="radio" name="winner" value="teamC" /> 
</form> 
</div> 

Answer 1

這是一個嘗試。我相信使用一些插件可以使它更簡單，但我想測試一個普通的javascript選項。你可以看到它住在這裏：http://jsfiddle.net/n9jSy/3/

<script type="text/javascript"> 
    teams = []; 

    function initVars() { 
     teams[1] = {"name" : "team A", "won" : 2, "lost" : 1}; 
     teams[2] = {"name" : "team B", "won" : 2, "lost" : 2}; 
     teams[3] = {"name" : "team C", "won" : 1, "lost" : 2}; 
     teams[4] = {"name" : "team D", "won" : 0, "lost" : 4}; 
    } 

    function sortByWonAndPlayed(a, b) { 
     console.log("sorting"); 
     var x = a.won; 
     var xx = a.won + a.lost; 
     var y = b.won; 
     var yy = b.won + b.lost; 
     return ((x < y) ? 1 : ((x > y) ? -1 : ((yy > xx) ? -1 : ((xx > yy) ? 1 : 0)))); 
    } 

    function updateTable() { 
     console.log("updating table"); 
     var table = document.getElementById("pointsTable"); 
     teams.sort(sortByWonAndPlayed); 

     for (var i = 0; i < teams.length; i++) { 
     var row = table.rows[i+1]; 
     row.cells[0].innerHTML = teams[i].name; 
     row.cells[1].innerHTML = teams[i].won + teams[i].lost; 
     row.cells[2].innerHTML = teams[i].won; 
     row.cells[3].innerHTML = teams[i].lost; 
     row.cells[4].innerHTML = teams[i].won * 10; 
     } 
    } 

    function newValues(result) { 
     console.log ("newValues " + result); 
     var i; 
     if (result === "AC") { 
     for (i = 0; i < 4; i++) { 
      if (teams[i].name === "team A") { 
      teams[i].won++; 
      } 
      else if (teams[i].name === "team C") { 
      teams[i].lost++; 
      } 
     } 
     } else if (result === "CA") { 
     for (i = 0; i < 4; i++) { 
      if (teams[i].name === "team A") { 
      teams[i].lost++; 
      } 
      else if (teams[i].name === "team C") { 
      teams[i].won++; 
      } 
     } 
     } else if (result === "BD") { 
     for (i = 0; i < 4; i++) { 
      if (teams[i].name === "team B") { 
      teams[i].won++; 
      } 
      else if (teams[i].name === "team D") { 
      teams[i].lost++; 
      } 
     } 
     } else if (result === "DB") { 
     for (i = 0; i < 4; i++) { 
      if (teams[i].name === "team B") { 
      teams[i].lost++; 
      } 
      else if (teams[i].name === "team D") { 
      teams[i].won++; 
      } 
     } 
     } else if (result === "AD") { 
     for (i = 0; i < 4; i++) { 
      if (teams[i].name === "team A") { 
      teams[i].won++; 
      } 
      else if (teams[i].name === "team D") { 
      teams[i].lost++; 
      } 
     } 
     } else if (result === "DA") { 
     for (i = 0; i < 4; i++) { 
      if (teams[i].name === "team A") { 
      teams[i].lost++; 
      } 
      else if (teams[i].name === "team D") { 
      teams[i].won++; 
      } 
     } 
     } else if (result === "BC") { 
     for (i = 0; i < 4; i++) { 
      if (teams[i].name === "team B") { 
      teams[i].won++; 
      } 
      else if (teams[i].name === "team C") { 
      teams[i].lost++; 
      } 
     } 
     } else if (result === "CB") { 
     for (i = 0; i < 4; i++) { 
      if (teams[i].name === "team B") { 
      teams[i].lost++; 
      } 
      else if (teams[i].name === "team C") { 
      teams[i].won++; 
      } 
     } 
     } 
     updateTable(); 
    } 


    window.onload = function() { 
       console.log("started"); 
     initVars(); 
       updateTable(); 
    }; 
    </script>