[JavaScript]ボタンをクリックしてテーブルに行を追加する

2024.2.9

asami-furuta

この記事では、テーブルに行を追加する動きの、JavaScriptでの実装方法をまとめています。

INDEX

ボタンをクリックしてテーブルに行を追加する

デモはこちらです。
※この画面では入力しても確定することはできません。

See the Pen 【JS】テーブルに行を追加する by asamifuruta (@asamih5) on CodePen.

HTML

<table>
  <thead>
    <tr>
      <th>種類</th>
      <th>値段</th>
      <th>購入日</th>
    </tr>
  </thead>
  <tbody id="target-tag">
    <tr>
      <td>りんご</td>
      <td>150円</td>
      <td>2023-01-01</td>
    </tr>
    <tr>
      <td>みかん</td>
      <td>300円</td>
      <td>2023-02-01</td>
    </tr>
    <tr>
      <td>いちご</td>
      <td>400円</td>
      <td>2023-01-01</td>
    </tr>
    <tr>
      <td>もも</td>
      <td>500円</td>
      <td>2023-01-01</td>
    </tr>
  </tbody>
</table>
<button onClick="addCode()">追加</button>

CSS

table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0 .5rem;
}

tr {
  border-color: #ccc;
  border-style: solid;
  border-width: 1px 0;
}

th {
  text-align: left;
  padding: 1rem;
}

td {
  padding: 1rem;
}

button {
  border: 1px solid #333;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  padding: .5rem 1rem;
  margin: 0 1rem;
}

button:hover {
  background-color: #333;
  color: #fff;
}

JavaScript

HTMLに挿入したいコードを1行ずつ分けて書きます。

html_code = '';
html_code += '<tr>\n';
html_code += '  <td><input type="text" id="type"></td>\n';
html_code += '  <td><input type="text" id="price">円</td>\n';
html_code += '  <td><input type="date" id="date"></td>\n';
html_code += '</tr>\n';

次に、上記のコードをHTMLに追加する関数を書きます。

function addCode(){
  //target-tagというidを付与した要素を取得
  target = document.getElementById('target-tag');
  //上記の要素の中に"html_code"を追加
  target.innerHTML =  target.innerHTML + html_code;
}