Javascript help, tables and radio buttons

Question

I am new to Javascript and need some help.

See the image first:

.

Points predictor application.

Basically when the user selects the winning team through the radio button it should add 10 points to the winning team in the points column and and sort the table (row sorting)automatically based on the points the team has higher points higher position.

Does anyone have any ideas how to achieve this?

Here's the 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

Here is one attempt. I'm sure it can be made much simpler using some plugins, but I wanted to test a plain javascript option. You can see it live here: 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>