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

我们需要构建一个网站，可以上传学生的姓名和不同科目的成绩数据。上传后，它将把学生数据插入表格中，并显示总分、平均分以及及格/不及格状态。实现使用HTML和JavaScript进行。

方法：

首先，我们需要为姓名和科目成绩创建一些行和列。科目成绩将进一步分为四列。有四个科目名称将被显示。用户可以通过单击“添加到表格”按钮输入细节。
将有另一个名为“学生数据”的表格，包含四列姓名、总分、平均分和及格或不及格。
对于每个输入的数据，将在成绩表中添加一行，显示学生的总分、平均分和及格或不及格状态。如果平均分大于70，则状态为“及格”，否则为“不及格”。
如果我们输入其他数据，它将存储在表格中。

示例： 此示例描述了上述方法。

HTML

<!DOCTYPE html> 
<html> 
  
<body bgcolor="lightblue"> 
    <center> 
    <table border="1" cellspacing="5" bgcolor="white"> 
        <caption><b>Input Marks</b></caption> 
        <tr> 
            <th rowspan="2">Name</th> 
            <th colspan="4">Score</th> 
  
        </tr> 
        <tr> 
            <th>Hindi</th> 
            <th>English</th> 
            <th>Math</th> 
            <th>C Programming</th> 
        </tr> 
        <tr> 
            <td><input type="text" id="aname"></td> 
            <td><input type="text" id="am"></td> 
            <td><input type="text" id="aj"></td> 
            <td><input type="text" id="ad"></td> 
            <td><input type="text" id="an"></td> 
        </tr> 
        <tr> 
            <th colspan="5" height="30"> 
            <input type="submit" value="Add To Table" 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('aname').value); 
            k=parseFloat(document.getElementById('am').value); 
            r=parseFloat(document.getElementById('aj').value); 
            e=parseFloat(document.getElementById('ad').value); 
            v=parseFloat(document.getElementById('an').value); 
            // Calculating Total 
            sum=k+r+e+v; 
            avg=sum/4; 
            // Display on 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>=70){ 
                cell1.innerHTML="<font color=green>Pass</font>"; 
            }else{ 
                cell1.innerHTML="<font color=red>Fail</font>"; 
            } 
        } 
    </script> 
</body> 
</html>

输出：

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