javascript - 在 html 表中通过箭头键导航

Question

我已经为 html 表格编写了代码，并希望像在 Excel 中一样使用箭头键向上/向下/向左/向右导航。

https://jsfiddle.net/daa3muLp/6/是创建的 fiddle 帖子。它适用于上/下箭头键和 ctrl+右/左，但问题是使用“添加员工”按钮动态添加列时。

<input type="button" value="Add Employee" id="btnAddCol" onclick="window.addCol('dataTable')" />
<table id="dataTable">
  <tr id="r_0">
    <th></th>
    <th>Date</th>
    <th>RM</th>
    <th>WS</th>
    <th>FH</th>
    <th>OT-R</th>
    <th>OT-W</th>
    <th>OT-F</th>
  </tr>
  <tr id="r_1">
    <td>
      <input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
    </td>
    <td>
      <input type="text" value="22-sep-2016" name="date_1" size="9">
    </td>
    <td>
      <input type="text" name="rom_1.1" title="ROM, Date: 1" size="1"> 
    </td>
    <td>
      <input type="text" name="waste_1.1" title="Waste, Date: 1" size="1"> 
   </td>
    <td>
      <input type="text" name="fh_1.1" size="1" title="FH, Date: 1"> </td>
    <td>
      <input type="text" name="ot-rom_1.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
    <td>
      <input type="text" name="ot-waste_1.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
    <td>
      <input type="text" name="ot-FH_1.1" class="ot" size="1" title="OT-FH, Date: 1">
    </td>
  </tr>
  <tr id="r_2">
    <td>
      <input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
    </td>
    <td>
      <input type="text" value="23-sep-2016" name="date_1" size="9">
    </td>
    <td>
      <input type="text" name="rom_2.1" title="ROM, Date: 1" size="1"> </td>
    <td>
      <input type="text" name="waste_2.1" title="Waste, Date: 1" size="1"> </td>
    <td>
      <input type="text" name="fh_2.1" size="1" title="FH, Date: 1"> </td>
    <td>
      <input type="text" name="ot-rom_2.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
    <td>
      <input type="text" name="ot-waste_2.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
    <td>
      <input type="text" name="ot-FH_2.1" class="ot" size="1" title="OT-FH, Date: 1">
    </td>
  </tr>
  <tr id="r_3">
    <td>
      <input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
    </td>
    <td>
      <input type="text" value="24-sep-2016" name="date_1" size="9">
    </td>
    <td>
      <input type="text" name="rom_3.1" title="ROM, Date: 1" size="1"> </td>
    <td>
      <input type="text" name="waste_3.1" title="Waste, Date: 1" size="1"> </td>
    <td>
      <input type="text" name="fh_3.1" size="1" title="FH, Date: 1"> </td>
    <td>
      <input type="text" name="ot-rom_3.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
    <td>
      <input type="text" name="ot-waste_3.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
    <td>
      <input type="text" name="ot-FH_3.1" class="ot" size="1" title="OT-FH, Date: 1">
    </td>
  </tr>
  <tr id="r_4">
    <td>
      <input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
    </td>
    <td>
      <input type="text" value="25-sep-2016" name="date_1" size="9">
    </td>
    <td>
      <input type="text" name="rom_4.1" title="ROM, Date: 1" size="1"> </td>
    <td>
      <input type="text" name="waste_4.1" title="Waste, Date: 1" size="1"> </td>
    <td>
      <input type="text" name="fh_4.1" size="1" title="FH, Date: 1"> </td>
    <td>
      <input type="text" name="ot-rom_4.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
    <td>
      <input type="text" name="ot-waste_4.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
    <td>
      <input type="text" name="ot-FH_4.1" class="ot" size="1" title="OT-FH, Date: 1">
    </td>
  </tr>
  <tr id="r_5">
    <td>
      <input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
    </td>
    <td>
      <input type="text" value="26-sep-2016" name="date_1" size="9">
    </td>
    <td>
      <input type="text" name="rom_5.1" title="ROM, Date: 1" size="1"> </td>
    <td>
      <input type="text" name="waste_5.1" title="Waste, Date: 1" size="1"> </td>
    <td>
      <input type="text" name="fh_5.1" size="1" title="FH, Date: 1"> </td>
    <td>
      <input type="text" name="ot-rom_5.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
    <td>
      <input type="text" name="ot-waste_5.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
    <td>
      <input type="text" name="ot-FH_5.1" class="ot" size="1" title="OT-FH, Date: 1">
    </td>
  </tr>
</table>



<script type="text/javascript">
   $(function() { 
                //cursor movement with keyboard  js code

      $('input[name^="rom_"], input[name^="waste_"], input[name^="fh_"], input[name^="ot-rom_"], input[name^="ot-waste_"],input[name^="ot-FH_"]').bind('keyup', function(e) {
          var isCtrl = false;
          if (window.event) 
             isCtrl = !!window.event.ctrlKey; 
          else 
             isCtrl = !!ev.ctrlKey;

          var $this = $(this);
          var $tr = $this.closest('tr');
          var name = this.name.substring(0, this.name.indexOf('_'));
          var str = this.name;
          row = str.substring(str.indexOf("_") + 1, str.indexOf("."));
          pos = str.indexOf("_") + 1;
          next = str.replace(row, parseInt(row) + 1);
          prev = str.replace(row, parseInt(row) - 1);

          if (e.keyCode == 38) {
             $('input[name="' + prev + '"]').focus();
          } else if (e.keyCode == 40) {
              $('input[name="' + next + '"]').focus();
          } else if (isCtrl && e.keyCode == 37) {
              temp = $this.closest("td").prev().children().focus();                    
          } else if (isCtrl && e.keyCode == 39) {
               $this.closest("td").next().children().focus();
          }
        });
    });

    window.addCol = function addCol(tableName) {
       var countCol = parseInt($("#"+tableName).attr('data-countCol'), 10) || 1;
       var row = 0;
       $("#"+tableName).attr('data-countCol', ++countCol);       
       var tempName = $("#"+tableName+" #searchName_1").clone(false, false);
       var tempToken = $("#"+tableName + " #searchToken_1").clone(false, false);
       tempName.prop("value", "");
       tempName.prop("readonly", true);
       tempToken.prop("value", "");
       tempName.attr("id", "searchName_" + countCol);
       tempToken.attr("id", "searchToken_" + countCol);
       tempName.prop("name", "searchName_" + countCol);
       tempToken.prop("name", "searchToken_" + countCol);

       $("#"+tableName+" tr:first ").append("<th colspan=\"6\">   </th>").find("th:last").wrapInner(tempName);
       $("#"+tableName+ " tr:nth-child(2)").append("<th colspan=\"6\"></th>").find("th:last").wrapInner(tempToken);
       $("#"+tableName +" tr:nth-child(3)").append("<th>R</th><th>W</th> <th>FH</th><th>OTR</th><th>OTW</th><th>OTFH</th>");

       $('#dataTable tr:gt(2)').each(
       function () {
         row = row + 1;
         $('<td><input type="text" size=1 name=rom_' + row + '.' + countCol + ' title= "ROM, Date: '+ row +'" onblur="validateField(this)"></td><td><input type="text" size=1 name=waste_' + row + '.' + countCol + ' title= "Waste, Date: '+ row +'"  onblur="validateField(this)"></td><td><input type="text" size=1 name=fh_' + row + '.' + countCol + ' title= "FH, Date: '+ row +'"  onblur="validateField(this)"></td><td><input type="text" name="ot-rom_' + row + '.' + countCol + '" title= "OT-ROM, Date: '+ row +'"  size=1 class="ot" onblur="validateField(this)"> </td><td><input type="text" title= "OT-Waste, Date: '+ row +'"  name="ot-waste_' + row + '.' + countCol + '" size=1 class="ot" onblur="validateField(this)"></td><td><input type="text" title= "OT-FH, Date: '+ row +'"  name="ot-FH_' + row + '.' + countCol + '" size=1 class="ot" onblur="validateField(this)"> </td>').insertAfter($(this).children('td:last'));
          }
      );
   };          



  </script>

我什至尝试过使用 jquery 的 .on() 但它不起作用。

Answer 1

使用 $(document).on('keyup','input[name^="rom_"], input[name^="waste_"]........', function( e) {

您必须将事件绑定(bind)到父元素，因为输入尚不存在。

更新了 fiddle :https://jsfiddle.net/daa3muLp/7/