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_table" class="col-md-2 control-label">All Size Table
        &nbsp;
    </label>
  <div class="col-md-10">
    <textarea class="form-control" id="all_size_table" name="all_size_table"></textarea>
  </div>
</div>

<div class="form-group">
  <label for="key_size_table" class="col-md-2 control-label">Key Size Table
        &nbsp;
    </label>
  <div class="col-md-10">
    <textarea class="form-control" id="key_size_table" name="key_size_table"></textarea>
  </div>
</div>

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

JavaScript

var All_Size_Table_Json = [["A","232.400","232.50 ","232.300","Calliper","232.400","A"],["B","82.600","82.70 ","82.650","Calliper","82.600","R"],["C","8.000","7.99 ","7.970","Ring gauge","8.000","R"],["1","0.050","0.05 ","0.010","Runout gauge","0.050","A"],["2","3.000","3.10 ","3.050","Calliper","3.000","R"],["3","92.300","92.35 ","92.300","2.5D projector","92.300","A"],["4","147.900","147.90 ","147.850","2.5D projector","147.900","A"],["5","M4(牙深7MM)","","","assembly","M4(牙深7MM)","R"],["6","3.000","3.05 ","2.950","Not measureed","3.000","A"],["7","6.000","6.00 ","5.950","Calliper","6.000","A"],["8","214.500","214.55 ","214.400","Calliper","214.500","A"],["9","19.000","19.10 ","18.900","Calliper","19.000","A"],["10","65.950","66.00 ","65.900","Calliper","65.950","A"],["11","12.850","12.85 ","12.800","Calliper","12.850","A"],["12","0.500","0.50 ","0.450","Calliper","0.500","A"],["13","6.000","6.05 ","5.950","Calliper","6.000","A"],["14","0.900","0.95 ","0.900","Calliper","0.900","A"],["15","6.050","6.15 ","5.950","Micormeter","6.050","A"],["16","1.000","1.05 ","1.000","Calliper","1.000","A"]]

var Key_Size_Table = [["Specs","232.400","82.600","8.000",""],["Upper","232.50 ","82.70 ","7.99 ",""],["Lower","232.300","82.650","7.970",""],["Inspection Method","Calliper","Calliper","Ring gauge",""],["Sample 1","232.400","82.600","8.000","R"],["Sample 2","232.50 ","82.70 ","7.99 ","A"],["Sample 3","232.300","82.650","7.970","A"],["Sample 4","ok","ok","ok","A"],["Sample 5","a","b","c","R"]]

function jexcel_all_size_table(parameters_json) {
  $("#all_size_table").replaceWith("<div id='all_size_table'></div>");
  if (parameters_json) {
    var excelArray = parameters_json
  }


  $('#all_size_table').jexcel({
    data: excelArray,
    colHeaders: ['Item', 'Specs', 'Upper', 'Lower', 'Inspection Method'],
    colWidths: [50, 100, 100, 100, 150],
    allowInsertRow: false,
    allowManualInsertRow: false,
    allowInsertColumn: true,
    allowManualInsertColumn: false,
   ...