sample: :nth-childを使った表の装飾

by sii_side

HTML

<button onclick="addRow();">add</button>

<table>
  <tbody>
    <tr>
      <td>hoge</td>
      <td>fuga</td>
      <td>piyo</td>
    </tr>
    <tr>
      <td>hoge</td>
      <td>fuga</td>
      <td>piyo</td>
    </tr>
    <tr>
      <td>hoge</td>
      <td>fuga</td>
      <td>piyo</td>
    </tr>
    <tr>
      <td>hoge</td>
      <td>fuga</td>
      <td>piyo</td>
    </tr>
  </tbody>
</table>

CSS

/* 背景色を指定するのはここだけ */
tr:nth-child(even) {
  background-color: #fcc;
}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #000;
}

JavaScript

function addRow() {
  var table = document.querySelector("table");
  
  //行を挿入するが、スタイルの指定は一切しない
  table.tBodies[0].innerHTML += "<tr><td>hoge</td><td>fuga</td><td>piyo</td></tr>";
}