問題
9
jQuery
欲しいものリストを作ってみよう！
jQueryの問題に挑戦しよう！
問題
「欲しいものリストを作ってみよう！」
今回はデモのような欲しいものリストを作ってみましょう！
あらかじめエディタに書くコード
<div class="box">
<label for="name">名前</label>
<input type="text" id="name">
<label for="price">価格</label>
<input type="number" id="price">
<button>リストに追加</button>
</div>
<table>
<tr>
<th>名前</th>
<th>価格</th>
</tr>
<tr>
<td>iphone 12</td>
<td>80000円</td>
</tr>
</table>
¥HTML¥
.box{
display: flex;
flex-direction: column;
width: 300px;
}
.box input{
margin-bottom: 10px;
}
table{
border-collapse: collapse;
width: 300px;
margin-top: 30px;
}
th,td{
border: 1px solid black;
text-align: center;
}
th{
background-color: #eee;
}
¥CSS¥
期待する画面
解答と解説（欲しいものリストを作ってみよう！）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
今回はaddListという関数を外部で定義し、それを呼び出す形にしてみました。addListでは#nameと#priceの内容をvalを用いて取得し、それをtrやtdの中に入れ、appendでtableに付け加える処理を行うようにしています。同じものをリストに追加するということは考えにくいのでボタンをクリックした時にinputの内容は削除しています。
