How to edit CSS of a last row in a table?-CodePudding

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;
    }

CodePudding user response：

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>

CodePudding user response：

if you want to edit the last element in rows you can use :last-child to select the last row.

you can read more here.