this is the table that I created. I'm pretty much a beginner in Web programming so any help would be appreciated. I'm trying to figure out how do I add CSS to the last row in the created table. What this code does is basically makes a table with 4 rows and it calculates number squared, its factorial and sum of elements in a row. At the bottom of the table is row which contains sum of elements for each column. How do I add styles to, for instance, make background color to be darkblue? Thanks in advance:)
function tablica() {
var sum1 = 0,
sum2 = 0,
sum3 = 0;
var nr = document.getElementById("broj").value
if (nr < 2) {
document.getElementById("rezultat").innerHTML = "Prilagođeno samo za rad s brojevima većim od 1";
window.alert("Unijeli ste broj " + broj.value + ", a taj broj je manji od 2...");
} else {
var rez = "<table id='tablica' class='tabClass'><tr><th>N</th><th>N²</th><th>N!</th><th>Suma</th></tr>";
var faktorijela = 1;
for (var i = 1; i <= nr; i++) {
let val1 = i;
let val2 = i * i;
let val3 = (faktorijela = faktorijela * i);
rez = rez + "<tr><td>" + val1 + "</td><td>" + val2 + "</td><td>" + val3 + "</td><td>" + (val1 + val2 + val3)
"</td></tr>";
sum1 = sum1 + val1;
sum2 = sum2 + val2;
sum3 = sum3 + val3;
}
rez = rez + "<tr><td>" + sum1 + "</td><td>" + sum2 + "</td><td>" + sum3 + "</td><td>∑</td></tr>";
rez = rez + "</table>";
}
var rezTablica = document.getElementById("rezultat");
rezTablica.innerHTML = rez;
}
Use the :last-child or :last-of-type pseudo-class.
table {
border-collapse: collapse;
}
table td {
padding: 5px;
}
table tr:last-child {
background: salmon;
}<table>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
</tbody>
</table>