javascript - 输入高尔夫分数和相关计算时如何指定表格行

Question

我有一个表格，它从数据库中填充有关所选高尔夫球场的详细信息。在这张表中，我有 18 行，每个孔一个。每行填充类似于高尔夫记分卡的数据，并输入每个洞的得分。

我已经找到了计算得分并在第一行显示的代码，但是我该如何为其他 17 个洞执行此操作

表代码

echo "<tr>
        <td style='display:none;'><input type='number' class='form-control' name='holeID' id='hole".$row["holeID"]."' value=".$row["holeID"]." readonly tabindex='-1'></td>

        <td ><input type='number' class='form-control' name='holeNumber[]' id='hole".$row["holeNumber"]."' value=".$row["holeNumber"]." readonly tabindex='-1'></td>

        <td ><input type='number' class='text-center form-control' name='holePar[]' id='par".$row["holeNumber"]."' value=".$row["par"]." readonly tabindex='-1'></td>

        <td ><input type='number' class='text-center form-control strokeIndex' name='holeStrokeIndex[]' id='hole".$row["holeNumber"]."strokeIndex' value=".$row["strokeIndex"]." readonly tabindex='-1'></td>

        <td ><input type='number' class='text-center form-control strokesReceived' name='strokesReceived' id='hole".$row["holeNumber"]."strokesReceived' value='' readonly tabindex='-1'></td>

        <td ><select class='form-control scoreInput' id='scoreInputHole".$row["holeNumber"]."' name='scoreInput' >
    <option value='' disabled selected hidden>Input Score..</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
    <option value='6'>6</option>
    <option value='7'>7</option>
    <option value='8'>8</option>
    <option value='9'>9</option>
    <option value='NR'>NR</option>  
</td>

        <td ><input type='number' class='text-center form-control pointsScored' name='pointsScored' id='hole".$row["holeNumber"]."points' value='' readonly tabindex='-1'></td>

        </tr>";

分数计算代码

 $(document).on('change','#scoreInput',function(){
        alert($('#scoreInput :selected').val()+ " shots");

        var score = $('#scoreInput :selected').val();

        var par = document.getElementById('par1').value;

        var pointsScored = document.getElementsByName('pointsScored');

        alert ("Par " + par);

        var strokesReceived = document.getElementById('hole1strokesReceived').value;

    alert (strokesReceived + " strokes received");

    points = (parseFloat(par) + parseFloat(strokesReceived)) - parseFloat(score) + parseFloat(2);

    if(points < 1 || score == "NR"){
                    points = 0
                }

            alert (points + " points");

                pointsScored[0].setAttribute('value',points);

            });

好的，我已将代码更改为下面，并且每一行都按预期工作，引用正确的值，我现在在让 pointsScored 显示时遇到问题，错误是

未捕获的类型错误：pointsScored.setAttribute 不是函数

或者

adminEventScoreEntry.php?id=1:837 Uncaught TypeError: $(...).closest(...).find(...).setAttribute is not a function

 $(document).on('change','.scoreInput',function(){

                var score = $(this).children('option:selected').val();

                var par = $(this).closest('tr').find('.par').val();

                var pointsScored = $(this).closest('tr').find('.pointsScored');

                var strokesReceived = $(this).closest('tr').find('.strokesReceived').val();

                var points = (parseFloat(par) + parseFloat(strokesReceived)) - parseFloat(score) + parseFloat(2);

                console.log ("Score is "+score);
                console.log ("Par is "+par);
                console.log (strokesReceived + " strokes received");


                if(points < 1 || score == "NR"){
                    points = 0

                console.log (points +" points scored");

                $(this).closest('tr').find('.pointsScored').setAttribute('value', points);


                } else {

                    console.log (points +" points scored");
                    $(this).closest('tr').find('.pointsScored').setAttribute('value', points);
                }

            });
        });

标签： javascriptjquery

Answer 1

弄清楚了，

  $(document).on('change','.scoreInput',function(){

                var score = $(this).children('option:selected').val();

                var par = $(this).closest('tr').find('.par').val();

                var pointsScored = $(this).closest('tr').find('.pointsScored');

                var strokesReceived = $(this).closest('tr').find('.strokesReceived').val();

                var points = (parseFloat(par) + parseFloat(strokesReceived)) - parseFloat(score) + parseFloat(2);

                console.log ("Score is "+score);
                console.log ("Par is "+par);
                console.log (strokesReceived + " strokes received");


                if(points < 1 || score == "NR"){
                    points = 0

                console.log (points +" points scored");

                $(this).closest('tr').find('.pointsScored').attr('value', points);


                } else {

                    console.log (points +" points scored");
                    $(this).closest('tr').find('.pointsScored').attr('value', points);
                }

            });
        });