如何在不使用Javascript进行硬编码的情况下迭代表（等级计算器）

Question

    function grades() {
      //row 1
      var grade1 = document.getElementById("ass1").value;
      var grade2 = document.getElementById("ass2").value;
      var grade3 = document.getElementById("ass3").value;
      var grade4 = document.getElementById("ass4").value;
      var grade5 = document.getElementById("ass5").value;

      var finalgrade = Math.round(+grade1 + +grade2 + +grade3 + +grade4 + +grade5) / 5;

      //if grade is below 40 output in red
      if (finalgrade <= 40) {
        document.getElementById("fgrade").innerHTML = Math.round(finalgrade) + "%";
        document.getElementById("fgrade").style.color = "#ff0000";
      } else {
        document.getElementById("fgrade").innerHTML = Math.round(finalgrade) + "%";
      }
      //end of row 1



<table id="students">
      <tr>
        <th id=name>First Name</th>
        <th id=name2>Second Name</th>
        <th>Student ID</th>
        <th>Assignment 1 (%)</th>
        <th>Assignment 2 (%)</th>
        <th>Assignment 3 (%)</th>
        <th>Assignment 4 (%)</th>
        <th>Assignment 5 (%)</th>
        <th>Final Grade</th>
      </tr>

      <!--takes in user input for grades  -->

      <tr>
        <td>Alfreds</td>
        <td>Anders</td>
        <td>199098</td>
        <td> <input type="text" size="2" placeholder="-" id="ass1" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass2" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass3" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass4" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass5" onchange="changeHandler(this)"></td>
        <td id="fgrade">-</td>
      </tr>

我已经重复了10次代码，我想知道如何使用循环或数组来完成此操作，由于我完全被卡住了，因此不胜感激

该计划的目标是获取10个学生成绩并计算平均值并将其输出到最终成绩单元格

https://jsfiddle.net/elvo6969/7zbu8pwk/359/

我已经包含了我的js小提琴的链接，目标不是硬编码整个表，而是使用循环或数组来构建它。正确方向的任何指针都将得到很好的补偿

之所以这样做，是因为当我添加新行并尝试计算平均值时，我需要创建一个新函数来引用我创建的每个新行的每个新单元格，如何避免这种情况

谢谢

Answer 1

作为您的代码，有一种方法可以重构代码。

/*
HTML

<table id="students">
      ......
      <tr>
        <td>Alfreds</td>
        <td>Anders</td>
        <td>199098</td>
        <td> <input type="text" size="2" placeholder="-" id="ass1" onchange="changeHandler(this)" class="target"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass2" onchange="changeHandler(this)" class="target"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass3" onchange="changeHandler(this)" class="target"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass4" onchange="changeHandler(this)" class="target"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass5" onchange="changeHandler(this)" class="target"></td>
        <td id="fgrade">-</td>
      </tr>
</table>
*/

// javascript
function grades(gradeNodes, finalNode) {
    let sum = 0;
    let average = -1;

    for (let i = 0, l = gradeNodes.length; i < l; i++) {
        sum += parseInt(gradeNodes[i].getAttribute('value'));
    }

    average = sum / l;

    finalNode.innerHTML = average; // because of the final result node is empty.
}

// call the function grades anywhere you want.
// grades(document.querySelectorAll('.target'), document.getElementById('fgrade'));

建议Jquery处理DOM操作。

Answer 2

您可以通过使用嵌套的for循环来避免重复js代码，因为您可能有“ N”个（可能是10个）学生，每个学生都有5个年级。

    function grades() {
    // alert("w");
    for(j=0;j<=9;j++){
        // alert("w"+j);
        var finalgrade=0;
        for(i=1;i<=5;i++){
            // alert("w"+i);
            finalgrade = finalgrade + +document.getElementById("ass"+i+j).value;
            // alert("w"+i);
        }
        finalgrade=finalgrade/5;
        document.getElementById("fgrade"+j).innerHTML = Math.round(finalgrade) + "%";
        if (finalgrade <= 40) {
            document.getElementById("fgrade"+j).style.color = "#ff0000";
        } 
        else {
            document.getElementById("fgrade"+j).style.color = "#00ff00";
        }
    }
    // alert("w");
}

#students {
    font-family: sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  #students td,
  #students th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
  
  #students td {
    text-align: left;
  }
  
  #students tr:nth-child(even) {
    background-color: #ffffff;
  }
  
  #students tr:hover {
    background-color: #f1ff89;
  }
  
  #students th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #870212;
    color: white;
  }
  
  input {
    text-align: right;
  }
  
  button {
    background-color: #870212;
    color: white;
  }
  
  img {
    height: 100px;
    width: 334px;
  }
  

    <!DOCTYPE html>
<html>

  <head>
    <script>


    </script>
    <script src="grades.js"></script>
    <link rel="stylesheet" href="grades.css">

  </head>

  <body>





    <img src="https://www.maynoothuniversity.ie/sites/all/themes/nuim_themes/nuim/logo_old_2.png" alt="HTML5 Icon" width="334" height="150">


    <h2>
      Semester 2 Exam Results
    </h2>

    <table id="students">
      <tr>
        <th id=name>First Name</th>
        <th id=name2>Second Name</th>
        <th>Student ID</th>
        <th>Assignment 1 (%)</th>
        <th>Assignment 2 (%)</th>
        <th>Assignment 3 (%)</th>
        <th>Assignment 4 (%)</th>
        <th>Assignment 5 (%)</th>
        <th>Final Grade</th>
      </tr>

      <!--takes in user input for grades  -->

      <tr>
        <td>Alfreds</td>
        <td>Anders</td>
        <td>199098</td>
        <td> <input type="text" size="2" placeholder="-" id="ass10" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass20" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass30" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass40" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass50" onchange="changeHandler(this)"></td>
        <td id="fgrade0">-</td>
      </tr>


      <tr>
        <td>Billy</td>
        <td>Jean</td>
        <td>696969</td>
        <td> <input type="text" size="2" placeholder="-" id="ass11" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass21" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass31" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass41" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass51" onchange="changeHandler(this)"></td>
        <td id="fgrade1">-</td>
      </tr>


      <tr>
        <td>Joe</td>
        <td>Doe</td>
        <td>123454</td>
        <td> <input type="text" size="2" placeholder="-" id="ass12" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass22" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass32" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass42" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass52" onchange="changeHandler(this)"></td>
        <td id="fgrade2">-</td>
      </tr>


      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>8686858</td>
        <td> <input type="text" size="2" placeholder="-" id="ass13" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass23" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass33" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass43" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass53" onchange="changeHandler(this)"></td>
        <td id="fgrade3">-</td>
      </tr>


      <tr>
        <td>Adolf</td>
        <td>Eichman</td>
        <td>321332</td>
        <td> <input type="text" size="2" placeholder="-" id="ass14" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass24" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass34" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass44" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass54" onchange="changeHandler(this)"></td>
        <td id="fgrade4">-</td>
      </tr>



      <tr>
        <td>Jake</td>
        <td>Jakeson</td>
        <td>134338</td>
        <td> <input type="text" size="2" placeholder="-" id="ass15" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass25" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass35" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass45" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass55" onchange="changeHandler(this)"></td>
        <td id="fgrade5">-</td>
      </tr>


      <tr>
        <td>Bob</td>
        <td>Hand</td>
        <td>1900098</td>
        <td> <input type="text" size="2" placeholder="-" id="ass16" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass26" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass36" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass46" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass56" onchange="changeHandler(this)"></td>
        <td id="fgrade6">-</td>
      </tr>


      <tr>
        <td>Vladimir</td>
        <td>Putin</td>
        <td>1475732</td>
        <td> <input type="text" size="2" placeholder="-" id="ass17" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass27" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass37" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass47" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass57" onchange="changeHandler(this)"></td>
        <td id="fgrade7">-</td>
      </tr>


      <tr>
        <td>Barrack</td>
        <td>Obamo</td>
        <td>200008</td>
        <td> <input type="text" size="2" placeholder="-" id="ass18" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass28" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass38" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass48" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass58" onchange="changeHandler(this)"></td>
        <td id="fgrade8">-</td>
      </tr>


      <tr>
        <td>Alfonzo</td>
        <td>Gargonzales</td>
        <td>1646363</td>
        <td> <input type="text" size="2" placeholder="-" id="ass19" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass29" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass39" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass49" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass59" onchange="changeHandler(this)"></td>
        <td id="fgrade9">-</td>
      </tr>


    </table>
    <button id="grades" onclick='grades()'>Calculate Final Grade</button>
    <button id="newRow" onclick='addField()'>Add a row</button>
    <!-- <button id="newColumn" onclick='function()'>Add a Column</button> -->

    <!-- this js script changes user input to 100 a user inputs a number greater than 100
also output 0 if a user enters a number below 0-->
    <script>
      function changeHandler(val) {
        if (Number(val.value) > 100) {
          val.value = 100
        } else if (Number(val.value) < 0) {
          val.value = 0
        }

      }

    </script>

  </body>

</html>

JSFiddle输出

如果您想避免重复html代码或创建更多行和列，则可以创建数据库并可以使用php循环。