注文の選択肢の追加

「insertAfter で見出しの次に新しい行を追加する」の記事のコードに注文の選択肢を追加できるようにした。ことばで説明するのが大変なので、jsfiddle で遊んだほうがわかるだろう。

<form id="input_product" style="width:680px">
<fieldset>
  <input id="addtional_product" name="additonal_product" type="text" placeholder="追加したい商品の名前">
  <input id="addtional_price" name="additonal_price" type="number" step="1" min="0" placeholder="商品の価格">
  <button id="add_product">商品を追加する</button>
  <button id="delete_order">注文を削除する</button>
  <button id="delete_product">商品一覧をリセット</button>
</fieldset>
</form>

<form id="input_order" style="width:680px">
<fieldset>
<table>
  <tr>
    <th>お名前</th><th>商品</th><th>価格</th><th>個数</th><th>合計金額</th><th></th>
  </tr>
  <tr>
    <td>
      <input id="customer" type="text" autofocus placeholder="お客様のお名前">
    </td>
    <td>
      <select id="product"></select>
    </td>
    <td>
      <output id="price"></output>
    </td>
    <td>
      <input id="quantity" type="number" step="1" min="1" value="1">
    </td>
    <td>
      <output id="sum"></output>
    </td>
    <td>
      <button id="add_order">追加</button>
    </td>
  </tr>
</table>
</fieldset>
</form>

<table id="order_table">
  <caption>注文一覧</caption>
  <tr>
    <th style="width:100px">削除チェック</th><th>お名前</th><th>商品</th><th>個数</th><th>合計金額</th>
  </tr>
</table>

<style>
#order_table {
  border-collapse: collapse;
  width: 680px;

}
#order_table table {
  border:1px solid;
}

#order_table th {
  border: 1px solid;
}

#order_table td {
  border: 1px solid;
}
</style>

<script>
var list =[["アイテム", 100], ["アイテム2", 150], ["アイテム3", 200]];
var initList = list.slice(0);

function initialize() {
  $.each(initList, function(key) {
    $('<option value="' + key + '">' + this[0] + '</option>').appendTo("#product");
  }); 
}

initialize();

$("#input_order").submit(function() {
 return false;
});
$("#input_product").submit(function() {
 return false;
});

$("#input_order").change(function() {
  var price = list[$("#product :selected").val()][1];
  var quantity = $("#quantity").val();
  var sum =  price * quantity;
  $("#price").html(price);
  $("#sum").html(sum);
});

$("#add_order").click(function() {
  var customer = $("#customer").val();
  if (!customer) {
    return false;
  }
  var product = $("#product :selected").text();
  var quantity = $("#quantity").val();
  var price = list[$("#product :selected").val()][1];
  var sum =  price * quantity;
  $("<tr><td>" 
    + '<input type="checkbox">'　+ "</td><td>" 
    + customer + "</td><td>" 
    + product + "</td><td>"
    + quantity + "</td><td>"
    + sum 　+ "</td></tr>")
  　.insertAfter("table#order_table tr:first");
  $("#customer").val("");
  $("#quantity").val("1");
});

$("#add_product").click(function() {
  var product = $("#addtional_product").val();
  var price = $("#addtional_price").val();
  var value = list.length;

  if(!product || !price) {
    return false;
  }

  list.push([product, price]);
  $('<option value="'+ value + '">' + product + '</option>').appendTo("#product");
  $("#addtional_product").val("");
  $("#addtional_price").val("");
});

$("#delete_order").click(function(){
  if (confirm("本当に注文を削除しますか？")) {
    $("#order_table :checked").closest("tr").remove();
  }
});

$("#delete_product").click(function(){
  if (confirm("本当に商品一覧をリセットしますか？")) {
    $("#product").empty();
    initialize();
  }
});
</script>