Справка по 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>