資料結構
網路
關係型資料庫管理系統
作業系統
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+ 閱讀量
廣告