JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="http://192.168.88.18:8000/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://192.168.88.18:8000/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    <!-- <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> -->
    <link rel="stylesheet" href="http://192.168.88.18:8000/bower_components/datatables/media/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="http://192.168.88.18:8000/bower_components/datatables-buttons/css/buttons.bootstrap.css">

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>

    <style>
      body {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }

      .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        height: 60px;
        /* background-color: #f5f5f5; */
        background-color: #474747;
      }

      .container .text-muted {
        margin: 20px 0;
      }

    </style>
  </head>

  <body>
    <div class="container">
      <div>
        <div class="row">
          <div class="col-lg-2">
            <div class="form-group">
              <label...

JavaScript

$(function() {
  "use strict";

  $("#TC003").val(moment().format("YYYY-MM-DD")); // 訂單日期
  // $("#TC039").val(moment().format("YYYY-MM-DD")); // 單據日期
  $("#TC010, #TC011, #TC013, #TC015, #TC016, #TC017, #TC019") //{{{
    .hide()
    .parent()
    .hide(); //}}}
  $("#TC020, #TC021, #TC022, #TC023, #TC024, #TC025, #TC026, #TC027, #TC028") //{{{
    .hide()
    .parent()
    .hide(); //}}}
  // $("#TC032, #TC033, #TC034, #TC035, #TC036, #TC038") //{{{
  $("#TC032, #TC033, #TC034, #TC035, #TC036") //{{{
    .hide()
    .parent()
    .hide(); //}}}
  $("#TC039") //{{{
    .hide()
    .parent()
    .hide(); //}}}
  $("#TC043, #TC044, #TC045, #TC046, #TC047, #TC048") //{{{
    .hide()
    .parent()
    .hide(); //}}}
  $("#TC051, #TC052, #TC054, #TC055, #TC056, #TC057, #TC058, #TC059") //{{{
    .hide()
    .parent()
    .hide(); //}}}
  $("#TC060, #TC061, #TC062, #TC064, #TC065, #TC068, #TC069")
    // $("#TC060, #TC061, #TC062, #TC064, #TC065, #TC069")
    .hide()
    .parent()
    .hide();
  // $("#Ooteo6oi, #Qua1bai1, #Ieber4vi") //{{{
  $("#Ooteo6oi, #Qua1bai1 ") //{{{
    .hide()
    .parent()
    .hide(); //}}}
  $("#TC070, #TC071, #TC072, #TC073, #TC074, #TC075, #TC076, #TC077, #TC079") //{{{
    .hide()
    .parent()
    .hide(); //}}}
  $("#TC080, #TC081, #TC082, #TC083, #TC084, #TC085, #TC086, #TC087, #TC088, #TC089") //{{{
    .hide()
    .parent()
    .hide(); //}}}
  $("#TC090, #TC091, #TC092") //{{{
    .hide()
    .parent()
    .hide(); //}}}

  // 客戶簡稱
  $.get(
    //{{{
    "http://192.168.88.18:8000/aif2Aele",
    data => {
      $("#aeC7weev").typeahead({
        source: data
      });
    },
    "json"
  ); //}}}

  // 確認者
  $.get(
    //{{{
    "http://192.168.88.18:8000/phooHie3",
    data => {
      $("#TC040").typeahead({
        source: data
      });
    },
    "json"
  ); //}}}
});

// $("#lixah9Ee").click(() => {
//   "use strict";
//   $("#ooSobua5").attr("src", "/captcha?" + new Date().getTime());
// });

//...