<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <title>sum price</title>
  </head>
  <body>
    <input type="text" id="product_name" placeholder="商品">
    <input type="text" id="product_price" placeholder="価格">
    <input type="button" id="add" value="add">
    <input type="button" id="clear" value="clear">
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>価格</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>
  <div>
    <p class="sum_price">合計:0円</p>
  </div>
</html>
body {
  background-color: #a3d5d3;
  font-family: 'Helvetica', 'Arial', sans-serif;
  width: 450px;
  margin: 0 auto;
  padding: 20px;
}

table, input {
 margin: 5px;
}

input[type=text] {
 width: 120px;
}

table,tr,th,td {
  font-size: 20px;
  width: 70%;
  list-style-type: none;
  border-radius: 3px;
  border: 1px solid #000;
  padding: 5px;
}

td {
  background: #eeeff0;
  padding-left: 15px;
}

$(function(){
  const PRODUCT_LIST = "product_list";

  /********************
  共通関数
  ********************/
  function saveLocalstorage(name, data){
    if(isBlank(name) || isBlank(data)) {
      alert("error!!");
      return false;
    }

    //★既存のローカルストレージの値を取得
    var mainArray    = [];
    var localStJSON = getLocalstorage(name);
    if(localStJSON != null && localStJSON != "") {
      // ★JSON形式から連想配列に変換
      var mainArray = JSON.parse(localStJSON);
    }

    //連想配列のチェック
    if($.isPlainObject(data)) {
      mainArray.push(data);
    } else {
      alert("登録するデータ形式がエラーです。m(_ _ )m");
      return false;
    }
    
    // ★連想配列からJSON形式に変換
    var mainJSON = JSON.stringify(mainArray);

    // ★ローカルストレージに新規保存or上書き
    localStorage.setItem(name, mainJSON);
    return true;
  }
  
  function removeLocalStorage(name){
    if(isBlank(name)) {
      alert("error!!");
      return false;
    }
    // ★ローカルストレージから削除
    localStorage.removeItem(name);
  }
  
  function removeLocalStorageAll(){
    // ★ローカルストレージをすべてクリア
    localStorage.clear();
  }

  function getLocalstorage(name){
    if(isBlank(name)) retun;
    return localStorage.getItem(name);
  }

  // テーブルを自動生成する
  function bulidTable(){
    var tableBody = "";
    // ★ローカルストレージからデータを取得
    var localSt = getLocalstorage(PRODUCT_LIST);
    // ★JSON形式から連想配列に変換
    var localStJSON = JSON.parse(localSt);
    // TODO
    //alert(localStJSON);

    $(localStJSON).map(function(index, line){
      tableBody += "<tr>";
      tableBody += "<td class='name'>" + line["name"] + "</td>";
      tableBody += "<td class='price'>" + line["price"] + "</td>";
      tableBody += "</tr>";
    });
    // ★テーブルを生成
    $('table tbody').append(tableBody);
  }

  function sum(){
    // 表の金額を取得する(tdの奇数列を取得)
    var pricelist = $("table td[class=price]").map(function(index, val){
      var price = parseInt($(val).text());
      if(price >= 0) {
        return price;
      } else {
        return null;
      }
    });
    // 価格の合計を求める
    var total = 0;
    pricelist.each(function(index, val){
      total = total + val;
    });
    $(".sum_price").text("合計:"+total+"円");
  }

  function isBlank(data){
    if (data.length ==0 || data == ''){
      return true;
    } else {
      return false;
    }
  }

  /********************
  各種イベント処理
  ********************/
  // addボタン押下時の処理
  $("#add").click(function(){
    var name = $("#product_name").val();
    var price = $("#product_price").val();
    $('table tbody').append('<tr><td class="name">'+ name
                      +'</td><td class="price">'+price
                      +'</td></tr>');

    //ローカルストレージに保存
    var product = {"name": name, "price":price};
    saveLocalstorage(PRODUCT_LIST, product);

    // 合計値を再計算
    sum();
  });

  // clearボタン押下時の処理
  $("#clear").click(function(){
    removeLocalStorage(PRODUCT_LIST);
    $("table tbody tr").remove();
    sum();
  });

  // テーブルの生成
  bulidTable();
  // 画面表示時に価格の合計値を計算
  sum();

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js