1062 Web Programming - JS ex1

by sunnyhong

HTML

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>

    <button id="btnRed" onclick="redTable()">Red</button>

    <h2>Styling Tables</h2>

    <table id="t02" class="redbg">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>
    <br>

    <table id="t01">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>

  </body>

</html>

CSS

table {
  width: 100%;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 15px;
  text-align: left;
}

table .redbg {
  background-color: #f00;
}

table#t01 tr:nth-child(even) {
  background-color: #eee;
}

table#t01 tr:nth-child(odd) {
  background-color: #fff;
}

table#t01 th {
  background-color: black;
  color: white;
}

JavaScript

function redTable() {
	alert("btn");
  document.getElementById("t02").classlist.add("redbg");
}