CODEWITHSUNDEEP
javascripthtmlcss
Dominik Antonio Sajko
Dominik Antonio Sajko

Reputation: 47

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

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

Upvotes: 1

Views: 742

Answers (2)

Alimuhammadiii
Alimuhammadiii

Reputation: 309

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.

Upvotes: 0

Brennan
Brennan

Reputation: 358

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>

Upvotes: 4

Related Questions