HTML CSS 基礎 Part 05 -- 表に font-awesome のアイコンを組み込む

#html #css #javascript #fontawesome

why

テーブルから詳細にリンクする際、右矢印があるとわかりやすい。
しかし、文字の→をそのまま書くとダサい。

font-awesome を使うと美しいが、ハマりどころがあったので記事に残す

結論

これらに気をつければ、生成された　html に、後付けでアイコンを付与できる。ただの js を使うだけで。

Table Row の tr の一つ上の要素、tbody の child として tr を取得できる。 a. querySelectorAll("tbody tr") では取得できなかったので。
各セルに　append するときは毎回別の i タグを生成すると、すべてのセルに反映される。 a. 毎回生成せずに使い回すと最後の　append しか反映されなかったので。

css

目に優しく暗く

body {
  background-color: #282c34;
  color: #f8f8f2;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid #6272a4;
}

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

thead {
  background-color: #44475a;
}

tr:nth-child(even) {
  background-color: #32363c;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" 
    rel="stylesheet"
  >
  <title>ts-dom</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>金額</th>
        <th>リンク</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th>1</th>
        <th>100</th>
        <th>詳細</th>
      </tr>
      <tr>
        <th>2</th>
        <th>200</th>
        <th>詳細2</th>
      </tr>
      <tr>
        <th>3</th>
        <th>300</th>
        <th>詳細3</th>
      </tr>
    </tbody>
  </table>

</body>
<script src="main.js"></script>
</html>

font-awesome の cdn リンクと、シンプルなテーブル。
css と js のリンク。

js

const tbody = document.querySelector('tbody');
let tableRows = Array.from(tbody.children);

  tableRows.forEach(row => {
    const iElement = document.createElement("i");
    iElement.classList.add("fas","fa-arrow-right")

    let thElements = Array.from(row.getElementsByTagName('th'));

    let thirdTh = thElements[2];

    thirdTh.appendChild(iElement)
  });