I utilized this HTML Code to generate a table:
<div class="noten_tabelle">
<table id="grades_table" style="width:100%">
<tr>
<th>Subject</th>
<th>Oral</th>
<th>Exam</th>
</tr>
<!-- Populate content with js code -->
</table>
</div>
Using Javascript, I dynamically update the table each time new values are fetched from the server. Here is the JavaScript function:
function addToTable(subject, oralScore, examScore) {
var subjectName = getSubjectByNumber(subject);
//Create row
var row = document.createElement([subjectName]);
row.setAttribute("id", [subjectName]);
document.getElementById("grades_table").appendChild(row);
//Columns in a row
var cE = document.createElement("TD");
var tE = document.createTextNode([subjectName]);
cE.appendChild(tE);
document.getElementById([subjectName]).appendChild(cE);
var a = document.createElement("TD");
var b = document.createTextNode([oralScore]);
a.appendChild(b);
document.getElementById([subjectName]).appendChild(a);
var c = document.createElement("TD");
var d = document.createTextNode([examScore]);
c.appendChild(d);
document.getElementById([subjectName]).appendChild(c);
}
To clarify, the subject value is numeric and converted into a String representing the subject name such as "Mathematics" or "German".
Currently, the display looks like this:
However, there are discrepancies. The subject_name "Latin" should be under "Subject", "5.8" should be under "Oral", and "11.4" should align with "Exam".
Moreover, "Vocal Ensemble" should be listed again under "Subject", "4.7" under "Oral", and an empty field under "Exam".
Additionally, here is my CSS styling:
table {
font-family: Montserrat-Medium;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
If you have any insights on rectifying these inconsistencies, please feel free to share them. Any assistance would be greatly appreciated.