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="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">完美使用jExcel(內建增刪行)</textarea>
  </div>
</div>

<input type='button' value='最後新增一行' id="Button1">
<input type='button' value='刪除最後一行' id="Button2">

JavaScript

$("#all_size_amount").keypress(function(event) {
  if (event.keyCode == 13) {
    $('#all_size_amount').blur()
  }
});

$('#all_size_amount').focusin(function() {
  $(this).data('val', $(this).val());
});

$("#all_size_amount").change(function() {
  var prev = parseInt($(this).data('val'));
  var current = parseInt($(this).val());
  if (isNaN(prev)) {
    jexcel(null);
    return
  }
  if (prev < current) {
    diff = current - prev
    $('#parameters_area').jexcel('insertRow', diff);
  }
  if (prev > current) {
    diff = prev - current
    maxrow = $('#parameters_area').jexcel('getData').length;
    $('#parameters_area').jexcel('deleteRow', maxrow - diff, diff);
  }
})

function jexcel(parameters_json) {

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

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

  var exportjason = function(instance, cell, value) {
    /*     console.log(instance)
        console.log(cell)
        console.log(value)
        console.log(typeof(instance))
        console.log(typeof(cell))
        console.log(typeof(value)) */
    selectCell = true
    if (typeof cell == "string") { //偵測調整欄寬時不做任何事
      /* console.log("偵測調整欄寬時不做任何事") */
      return
    }
    if (typeof cell == "number" && typeof value == "number") { //刪除一行時不做任何事
      /* console.log("刪除一行時不偵測選取區") */
      selectCell = false
    }
    if (cell == undefined && value == undefined) { //新增一行時不做任何事
      /* console.log("新增一行時不偵測選取區") */
      selectCell = false
    }
    if (selectCell == true) {
      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 ==...