Chinese medicine

For warren pan

by wales

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<div class="row">
  <div class="col-sm-12" id="tool_area">
    <form>
      <table class="table">
        <thead>
          <tr>
            <th>名稱 </th>
            <th>劑量 </th>
            <th>單位</th>
          </tr>
        </thead>
        <tbody id="input_area">
        </tbody>
      </table>
    </form>
    <form class="form-inline">
      <div class="row">
        <div class="form-group">
          <label>&nbsp;</label>
          <button type="button" class="btn btn-info" id="btn_add">新增列</button>
        </div>
        <div class="form-group">
          <label>每一行筆數 :</label>
          <select id="items_perline" class="form-control">
          <option value=2>2</option>
          <option value=3>3</option>
          <option value=4 selected>4</option>
          <option value=5>5</option>
          <option value=6>6</option>
          </select>
        </div>
        <div class="form-group">
          <label>&nbsp;</label>
          <button type="button" id='btn_print' class='btn btn-primary'>印啦印啦</button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="row">
  <div class="col-sm-11" id="result_area">
  </div>
</div>

CSS

#result_area {
    writing-mode: tb-rl;
    font-size: 18pt;
    font-family: 標楷體;
    margin: 10px;
  }

  .unit {
    position: relative;
    left: 10px;
    font-size: 12pt;
    font-family: 標楷體;
  }

  .value {
    position: relative;
    left: 10px;
    writing-mode: lr;
    font-size: 12pt;
    font-family: 細明體;
  }

  #div_title {
    font-size: 18pt;
    color: Red;
    display: none;
  }

JavaScript

let result = "";
let template = "<tr><td><input  class='form-control' type='text' /></td> <td><input class='form-control' type='number' value=1></td><td><select class='form-control'><option value='錢' selected>錢</option><option value='兩'>兩</option><option value='斤'>斤</option><option value='枚'>枚</option><option value='片'>片</option></select></td></tr>";
$(document).ready(function() {
  $("#btn_add").on("click", function() {
    $("#input_area").append(template);
  });
  $("body").on("change", "input", function() {
    makeResult();
  });
  $("body").on("change", "select", function() {
    makeResult();
  });
  $("body").on("click", "#btn_print", printDiv);
});

function makeResult() {
  result = "";
  let index = 0;
  let items = ($("#items_perline").val()) ? $("#items_perline").val() : 4;
  $("#input_area > tr").each(function() {
    result += $(this).find('input[type=text]').val();
    result += "<span class='value'>" + $(this).find('input[type=number]').val() + "</span>";
    result += "<span class='unit'>" + $(this).find('select').val() + "</span>";
    if (index % items == items - 1) result += "<br/><br/>";
    else result += "&nbsp;&nbsp;";
    index++;
  });
  $("#result_area").html(result);
}

function printDiv() {
  $("#tool_area").hide();
  $("#btn_print").hide();
  window.print();
  setTimeout(function() {
    $("#tool_area").show();
    $("#btn_print").show();
    newWin.close();
  }, 10);

}