この記事では、テーブルに行を追加する動きの、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;
}
メモ
今回は、HTMLのbuttonタグににonClickを設定して関数を呼び出しました。クリックされたときの処理をJSファイルに書く方法でも同じように実装できると思います。
今回は追加した行の中身は入力欄にしましたが、HTMLを書き換えて活用してみてください!