jQueryAnimation
Googleでログイン
問題9：欲しいものリストを作ってみよう！
今回はデモのような欲しいものリストを作ってみましょう！
あらかじめエディタに書くコード
<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¥
期待する画面
解答ソースコード
$(function () {
$("button").click(function(){
addList();
$("#name").val("");
$("#price").val("");
});
function addList(){
var name=$("#name").val();
var price=$("#price").val()+"円";
$("table").append("<tr><td>"+name+"</td><td>"+price+"</td></tr>");
}
});
¥JavaScript¥
解説
今回はaddListという関数を外部で定義し、それを呼び出す形にしてみました。addListでは#nameと#priceの内容をvalを用いて取得し、それをtrやtdの中に入れ、appendでtableに付け加える処理を行うようにしています。同じものをリストに追加するということは考えにくいのでボタンをクリックした時にinputの内容は削除しています。
ログインして解答を見る
完了にする！
活動記録をTweetする
