ログイン

問題9 欲しいものリストを作ってみよう!

jQueryAnimationの問題

jQueryAnimation

欲しいものリストを作ってみよう!

問題

今回はデモのような欲しいものリストを作ってみましょう!

自分の環境に書くコード

              <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の内容は削除しています。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!