使用 HTML、CSS 和 JavaScript 创建动态成绩单

在本文中，我们将使用用户输入的内容构建一个动态报表。用户将输入分数（在本例中），我们将填充这些分数以计算学生的最终百分比。

我们还实现了及格/不及格状态，该状态将根据用户输入的内容呈现学生是否及格。我们将使用**HTML、CSS**和**JavaScript**进行实现。

步骤

  • 我们将创建一个 HTML 模板，其中包含用于姓名和科目分数的行和列。这些科目分数将进一步划分为 4 列，以描述要显示的 4 个科目名称。

  • 将会有另一个学生数据表，包含以下列：姓名、总分、平均百分比和及格/不及格。

  • 对于对数据进行的每个条目，将在分数表中添加一行，显示学生的总分、平均分和及格或不及格状态。

  • 及格/不及格状态将取决于学生的平均分。如果平均分 >= 33，则为及格，否则为不及格。

  • 任何其他数据都将存储在表中。

示例 1

在此示例中，我们从用户那里获取分数，然后计算总分和平均分。根据此平均分，我们获取学生是否及格。

# index.html

Open Compiler
<!DOCTYPE html>
<html>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <center>
   <table border="1" cellspacing="5" bgcolor="white">
      <caption><b>Enter Marks</b></caption>
      <tr style="background: silver;">
         <th rowspan="2">Name</th>
         <th colspan="4">Marks</th>
      </tr>
      <tr style="background: silver;">
         <th>English</th>
         <th>Physics</th>
         <th>Chemistry</th>
         <th>Maths</th>
      </tr>
      <tr>
         <td><input type="text" id="name"></td>
         <td><input type="text" id="english"></td>
         <td><input type="text" id="physics"></td>
         <td><input type="text" id="chem"></td>
         <td><input type="text" id="maths"></td>
      </tr>
      <tr>
         <th colspan="5" height="30">
         <input type="submit" value="Calculate" onclick="Sub()"></th>
      </tr>
   </table>
   <br>
   <table border="1" cellspacing="5" bgcolor="white"
      height="100" width="500" cellpadding="5" id="TableScore">
      <caption><b>Student Data</b></caption>
      <tr>
         <th width="180">Name</th>
         <th>Total</th>
         <th>Average</th>
         <th>Pass Or Fail</th>
      </tr>
   </table>
</center>
<script type="text/javascript">
   function Sub(){
      var n, k, r, e, v, sum, avg;
      n=(document.getElementById('name').value);
      eng=parseFloat(document.getElementById('english').value);
      phy=parseFloat(document.getElementById('physics').value);
      chem=parseFloat(document.getElementById('chem').value);
      maths=parseFloat(document.getElementById('maths').value);
      // Calculating the Total Marks
      sum=eng+phy+chem+maths;
      avg=sum/4;
      // Displaying the Student Data
      var newTable = document.getElementById('TableScore');
      var row = newTable.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(0);
      var cell3 = row.insertCell(0);
      var cell4 = row.insertCell(0);
      cell4.innerHTML= n;
      cell3.innerHTML=sum;
      cell2.innerHTML = avg;
      if(avg>=33){
         cell1.innerHTML="<font color=green>Pass</font>";
      } else {
         cell1.innerHTML="<font color=red>Fail</font>";
      }
   }
</script>
</body>
</html>

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

输出

上述程序在成功执行后将生成动态成绩单。在成绩单中，您可以添加姓名和分数。在分数中，您可以输入英语、物理、化学和数学的分数。输入分数后，单击“计算”按钮。它将生成一个包含总分、平均分或及格/不及格状态的成绩单。请参见下面的示例屏幕截图

更新于：2022-04-25

4K+ 阅读量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告