Javascript Jquery确定点扩展

我试图计算一个积分差来决定胜利者。 我有一个函数，根据输入的分数计算总分。 我已经编写了一个函数，该函数应该确定点分布，然后将标签应用于获胜者。然而，由于某些原因，如果第二名玩家在第一名玩家之后获得积分并最终获胜，则赢家标签仍然适用于第一名玩家

我做错了什么？有没有更好的方法

计算函数

function calculate() {
            var arr = [];
            var orr = [];
            var input = "";
            var row1 = 0;
            var row2 = 0;
            $("tbody tr").each(function() {
                row_total = 0;
                $(".score", this).each(function() {
                    row_total += Number($(this).val());
                });
                $(".total", this).val(row_total);
                $(".total", this).each(function() {
                    arr[row1] = $(this).val();
                    row1 += 1;
                });
                $(".status", this).each(function() {
                    orr[row2] = $(this);
                    row2 += 1;
                });
            });

            var spread = Math.abs(arr[0] - arr[1]);

            if (spread >= 5) {
                if (arr[0] > arr[1]) {
                    input = orr[0];
                } else if (arr[1] > arr[0]) {
                    input = orr[1];
                }
                alert("arr0:" + arr[0] + '\n' +
                        "arr1:" + arr[1] + '\n' +
                        "orr0:" + orr[0].text() + '\n' +
                        "orr1:" + orr[1].text() + '\n' +
                        "input:" + $(input).text() + '\n');
                var w3 = $(input).html("Winner");
                var w4 = $(input).css('background-color', 'lightgreen');
                var w5 = $(input).css('color', 'black');
            }
        }

HTML表格

<table id="main">
        <tr>
            <td class="r_color">

            </td>
            <td class="r_name">
                Competitor
            </td>
            <td class="r_score">
                Score 
            </td>
            <td class="r_score">
                Warnings
            </td>
            <td class="r_total">
                Total
            </td>
            <td>
                <input type="button" id="btn_Reset" value="Reset Points"/>
                <input type="button" id="btn_Clear" value="Clear All"/>
            </td>
        </tr>
        <tr>
            <td class="r_color">
                Red:
            </td>
            <td class="r_name">
                <input type="text" class="name"/>
            </td>
            <td class="r_score">
                <input class="score" type="number" step="1" min="-100" max="100" value="0" />
            </td>
            <td class="r_score">
                <input class="warning" type="number" step="1" min="0" max="3" value="0" />
            </td>
            <td class="r_total">
                <input class="total" type="text" value="0"/>
            </td>
            <td class="status">
                red
            </td>
        </tr>
        <tr>
            <td class="r_color">
                White:
            </td>
            <td class="r_name">
                <input type="text" class="name"/>
            </td>
            <td class="r_score">
                <input class="score" type="number" step="1" min="-100" max="100" value="0" />
            </td>
            <td class="r_score">
                <input class="warning" type="number" step="1" min="0" max="3" value="0" />
            </td>
            <td class="r_total">
                <input class="total" type="text" value="0"/>
            </td>
            <td class="status">
                white
            </td>
        </tr>
    </table>

竞争对手
分数
警告
全部的
红色：
红色
白色：
白色

我尝试“猜测”HTML部分，并将第5、7和14行的.val（）替换为.HTML（），因为我使用了我的分数、总数和状态（我不知道您在使用什么）

HTML部分：

<table border="1">
    <tbody>
        <tr>
            <td class="score">10</td>
            <td class="score">10</td>
            <td class="score">5</td>
            <td class="total"></td>
            <td class="status"></td>
        </tr>

        <tr>
            <td class="score">30</td>
            <td class="score">4</td>
            <td class="score">5</td>
            <td class="total"></td>
            <td class="status"></td>
        </tr>
   </tbody>
</table>

---

如果不做任何更改，您的代码将正常工作，请检查此处：

我添加了我的html代码我正在使用html5数字输入字段。我还修改了我的计算函数，使其代码更加友好。但是，我仍然有同样的问题，因为通过添加缺少的（不再使用$（“tbody tr”）.each选择任何内容）并替换arr[row1]=$（this.html（），top score并不总是标记为winnerWorks；arr[row1]=$（this.val（）；因为您在我的表单中使用的是一个，所以每当分数发生变化时，我都会运行计算函数。如果我在两个字段之间切换，当排列变为5时，将1连续添加到第一个字段，将2连续添加到第二个字段，当字段1为5，字段2为字段10时，第一个字段标记为赢家。即使第二个得分更高。如果我只添加一个字段，那么一切都正常。好的，找到你的错误。在某些时候，您正在比较字符串，“5”大于“10”。arr[row1]=$（this.val（）；应该是arr[row1]=Number（$（this.val（））；

function calculate() {
    $("tbody tr").each(function() {
        row_total = 0;
        $(".score", this).each(function() {
            row_total += Number($(this).html());
        });
        $(".total", this).html(row_total);
    });

    var arr = [];
    var orr = [];
    var row = 0;
    $("tbody tr").each(function() {
        $(".total", this).each(function() {
            arr[row] = $(this).html();
            orr[row] = $(this);
            row += 1;
        });
    });

    var spread = Math.abs(arr[0] - arr[1]);

    if (spread >= 5) {
        alert(arr[0] + "|" + arr[1]);
        if (arr[0] > arr[1]) {
            var w3 = $(orr[0]).closest('tr').find('.status').html("Winner");
            var w4 = $(orr[0]).closest('tr').find('.status').css('background-color', 'lightgreen');
            var w5 = $(orr[0]).closest('tr').find('.status').css('color', 'black');
        } else if (arr[1] > arr[0]) {
            var w3 = $(orr[1]).closest('tr').find('.status').html("Winner");
            var w4 = $(orr[1]).closest('tr').find('.status').css('background-color', 'lightgreen');
            var w5 = $(orr[1]).closest('tr').find('.status').css('color', 'black');
        }
    }
}