如何使用 HTML CSS 和 JavaScript 创建动态报告卡？

我们必须建立一个网站，您可以在其中上传您的学生数据，例如他们的姓名、不同科目的分数。上传后会在表格中插入学生数据，并显示总分、平均分、及格/不及格状态。实现是通过使用 HTML 和 JavaScript 完成的。

方法：

• 首先，我们必须为姓名和科目分数创建一些行和列。同样，科目分数将进一步分为四列。将显示四个主题名称。用户可以通过单击按钮“添加到表”来输入详细信息。
• 将有另一个表Student Data，其中包含四列 Name、Total、Average、Pass or Fail。
• 每输入一个数据，就会在分数表中增加一行，显示学生的总分、平均分和及格或不及格状态。如果平均分大于 70，则状态为“通过”，否则状态为“失败”。
• 如果我们输入另一个数据，它将存储在表中。

例子：

HTML

  

    
    
        
        
            
            
  
        
        
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
    Input MarksNameScoreHindiEnglishMathC Programming
            
    
    
        
        
            
            
            
            
        
          
    Student DataNameTotalAveragePass Or Fail
    
    
        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>";
            }
        }
    

输出：

学生的通过或失败状态