数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 HTML、CSS 和 JavaScript 创建动态成绩单
在本文中，我们将使用用户输入的内容构建一个动态报表。用户将输入分数（在本例中），我们将填充这些分数以计算学生的最终百分比。
我们还实现了及格/不及格状态，该状态将根据用户输入的内容呈现学生是否及格。我们将使用**HTML、CSS**和**JavaScript**进行实现。
步骤
我们将创建一个 HTML 模板，其中包含用于姓名和科目分数的行和列。这些科目分数将进一步划分为 4 列，以描述要显示的 4 个科目名称。
将会有另一个学生数据表，包含以下列：姓名、总分、平均百分比和及格/不及格。
对于对数据进行的每个条目，将在分数表中添加一行，显示学生的总分、平均分和及格或不及格状态。
及格/不及格状态将取决于学生的平均分。如果平均分 >= 33，则为及格，否则为不及格。
任何其他数据都将存储在表中。
示例 1
在此示例中，我们从用户那里获取分数，然后计算总分和平均分。根据此平均分，我们获取学生是否及格。
# index.html
<!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>输出
上述程序在成功执行后将生成动态成绩单。在成绩单中，您可以添加姓名和分数。在分数中，您可以输入英语、物理、化学和数学的分数。输入分数后，单击“计算”按钮。它将生成一个包含总分、平均分或及格/不及格状态的成绩单。请参见下面的示例屏幕截图
更新于：2022-04-25
4K+ 阅读量
广告