JSFiddle - React, Tailwind, and code Playground

by tika1952

HTML

<body>
  <main id="main">
    <div id="container_main">
      <div id="wrap">
        <!-- ▽ 明細 -->
        <p id="notFound"></p>
        <div id="tblDataArea">
          <table class="input">
            <thead id="tblHead">
              <tr>
                <th style="width: 25px;">行</th>
                <th style="width: 165px;">商品コード</th>
                <th style="width: 165px;">商品名</th>
                <th style="width: 120px;">入数</th>
              </tr>
            </thead>
            <tbody id="tblDetail">
              <tr id="tr">
                <td class="td_center">
                  <span id="lblRowNo1" name="ROW_NO">1</span>
                </td>
                <td class="td_left">
                  <input name="HIN_CD" class="ms_check" id="txtHinCd1" style="width: 130px;" type="text" maxlength="6" data-ctrl='{"type":"code","lenB":"6","padkb":"0"}' data-before="" data-msterr="">
                </td>
                <td>
                  <span id="lblHinName1" name="HIN_NAME"></span>
                </td>
                <td class="td_right">
                  <span id="lblIrisuA1" name="IRISUA"></span>
                </td>
              </tr>
              <tr id="tr2">
                <td class="td_center">
                  <span id="lblRowNo2" name="ROW_NO">2</span>
                </td>
                <td class="td_left">
                  <input name="HIN_CD" class="ms_check" id="txtHinCd2" style="width: 130px;" type="text" maxlength="6" data-ctrl='{"type":"code","lenB":"6","padkb":"0"}' data-before="" data-msterr="">
                </td>
                <td>
                  <span id="lblHinName2" name="HIN_NAME"></span>
                </td>
                <td class="td_right">
                  <span id="lblIrisuA2" name="IRISUA"></span>
                </td>
              </tr>
              <tr id="tr3">
                <td class="td_center">
                  <span id="lblRowNo3" name="ROW_NO">3</span>
                </td>
  ...

JavaScript

"use strict"
try {
  
  var g_objHinmoku1  = '';  
  var g_objHinmoku2  = '';  
  var g_objHinmoku3  = '';  
  var aryHinCd       = [];

  
  $(function() {
    $(document).ready(function() {
      $('[type=text]').focus(function(){
        $(this).select();
      });
    });
    
    //商品情報取得関数
    function getHinmoku(idx) {
      var $this = $("#txtHinCd" + idx);
      var objHinmoku = '';

      
      if ($this.val() == $this.data('before')) return true;

      
      switch (Number(idx)) {
        case 1: g_objHinmoku1 = ''; break;
        case 2: g_objHinmoku2 = ''; break;
        case 3: g_objHinmoku3 = ''; break;
      }
      $('#lblHinName' + idx).html('');
      $('#lblIrisuA'  + idx).html('');
      $('#txtHinCd' + idx).data('msterr', '');

      
      if ($this.val().length == 0) {
        $('#txtHinCd').data('before', $('#txtHinCd').val());
        return true;
      }

      
      $.Deferred().resolve()
        .then(function() {
          return JSON.parse("[{\"HIN_CD\":\"000001\",\"HIN_NAME\":\"商品\",\"IRISUA\":\"10\"}]");
        })
        .then(function(p_arrData) {
          if (p_arrData.length == 0) {
            
            return $.Deferred().reject('マスタにデータがありません').promise();
          } else {
            
            objHinmoku = p_arrData;
            return $.Deferred().resolve().promise();
          }
        })
        .then(function() {
          
          $('#lblHinName' + idx).html(objHinmoku[0].HIN_NAME);
          $('#lblIrisuA'  + idx).html(objHinmoku[0].IRISUA);

          switch (Number(idx)) {
            case 1: g_objHinmoku1 = objHinmoku; break;
            case 2: g_objHinmoku2 = objHinmoku; break;
            case 3: g_objHinmoku3 = objHinmoku; break;
          }
            
            $('#txtHinCd' + idx).data('before', $('#txtHinCd' + idx).val());

            $.wait(2000)
            .done(function(){
                console.log("blur処理終了");
            });

        })
        .fail(function(msg) {
         ...