JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/js/jquery.jexcel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/css/jquery.jexcel.css" type="text/css" />


<div class="form-group">
  <label for="key_size_amount" class="col-md-2 control-label">Key Size Amount
        &nbsp;
    </label>
  <div class="col-md-10">

    <input class="form-control" id="key_size_amount" name="key_size_amount" type="text" value="">


  </div>

</div>







<div class="form-group">
  <label for="all_size_amount" class="col-md-2 control-label">All Size Amount
        &nbsp;
    </label>
  <div class="col-md-10">

    <input class="form-control" id="all_size_amount" name="all_size_amount" type="text" value="">


  </div>

</div>







<div class="form-group">
  <label for="parameters_area" class="col-md-2 control-label">Parameters Area
        &nbsp;
    </label>
  <div class="col-md-10">

    <textarea class="form-control" id="parameters_area" name="parameters_area"></textarea>


  </div>

</div>







<div class="form-group">
  <label for="parameters_json" class="col-md-2 control-label">Parameters Json
        &nbsp;
    </label>
  <div class="col-md-10">

    <textarea style="width:500px;height:100px" class="form-control" id="parameters_json" name="parameters_json"></textarea>


  </div>

</div>

<input type='button' value='test!' id="newColumnButton">

JavaScript

$("#key_size_amount").change(function() {
  if ($("#key_size_amount").val() > 26 || $("#key_size_amount").val() < 1) {
    alert("Key Size Amount 範圍介於1-26間")
    $("#key_size_amount").val(null)
  } else {
    jexcel(null);
  }
})

$("#all_size_amount").change(function() {
  if ($("#all_size_amount").val() - $("#key_size_amount").val() < 0) {
    alert("All Size Amount 應該大於 Key Size Amount")
    $("#all_size_amount").val(null)
  } else {
    jexcel(null);
  }
})

function jexcel(parameters_json) {

  $("#parameters_area").replaceWith("<div id='parameters_area'></div>");
  $("#parameters_area").parent().parent().show();
  if (parameters_json) {
    excelArray = parameters_json
  } else {
    var key_size_amount = $("#key_size_amount").val()
    var all_size_amount = $("#all_size_amount").val()
    var excelArray = [];

    for (i = 1; i <= key_size_amount; i++) {
      var key_size_array = [String.fromCharCode(i + 64), '', '', '', '']
      excelArray.push(key_size_array)
    }

    for (j = 1; j <= all_size_amount - key_size_amount; j++) {
      var all_size_array = [j, '', '', '', '']
      excelArray.push(all_size_array)
    }
  }

  var exportjason = function(instance, cell, value) {
    if ($('#parameters_area').jexcel('getSelectedCells')) {
      var cellName = $(instance).jexcel('getColumnNameFromId', $(cell).prop('id'));
      var column = cellName.substring(0, 1);
      var row = cellName.substring(1);
      if (column == "F") {
        var upper = $('#parameters_area').jexcel('getValue', 'C' + row);
        var lower = $('#parameters_area').jexcel('getValue', 'D' + row);
        var newvalue = $('#parameters_area').jexcel('getValue', cellName);
        switch (newvalue.toUpperCase()) {
          case "":
            $('#parameters_area').jexcel('setValue', 'G' + row, '')
            break;
          case "OK":
            $('#parameters_area').jexcel('setValue', 'G' + row, 'A')
            break;
          default:
            if (newvalue >= lower &&...