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>