使用箭頭鍵瀏覽表單字段

Question

我有一個帶有“ 新行”功能腳本的表單。 然后，我從該站點添加了新的腳本導航表單字段 表單導航腳本

導航腳本僅 在行1中有效 。 我可以使用箭頭鍵在字段之間（ 從右到左，從左到右 ）移動。 如果我添加新行，則可以移至第2行（ 從上到下 ），但不能移回到第1行 （ 從上到下 ），並且也不能在第2行的字段之間移動（ 從右到左，從左到右 ） 。 如果我再次添加新行，則第3行的導航腳本根本不起作用，我只能從第1 行移至第2行 （ 上下移動 ），從第2 行移至第3行不起作用。

這是我的代碼， 新行腳本：

var row_id = 1;
function addRow(tableID) {            
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    row.id = 'id' + row_id;
    row_id++;
    for(var i=0; i<colCount; i++) {
       var newcell = row.insertCell(i);
       newcell.innerHTML = table.rows[0].cells[i].innerHTML;
       //alert(newcell.childNodes);
       switch(newcell.childNodes[0].type) {
             case "text":
                  newcell.childNodes[0].value = "";
             break;
             case "checkbox":
                  newcell.childNodes[0].checked = false;
             break;
             case "select-one":
                  newcell.childNodes[0].selectedIndex = 0;
             break;
             case "select":
                  newcell.childNodes[0].selectedIndex = 0;
             break;
             default:
                  newcell.childNodes[0].value = "";
             break;
        }               
    }
}

表單代碼：

<div class="row">
  <div class="col-md-12">
    <div class="table-responsive">
      <table class="table table-bordered table-hover table-striped sticky-header">
[....]
<tbody id="dataTable2">
   <?php if(!isset($dtdetail)) {;
         if(isset($message)) {

         for ($i=0; $i < $jmldtl; $i++) { ?>

         <tr>                                                                                                
            <td>
               <input type="text" name="tp_sal[]" id="tp_sal" size="5" value="<?php echo set_value('tp_sal['.$i.']'); ?>"/></td>
            <td>
               <input type="text" name="r_tpc_1[]" id="r_tpc_1" size="5" value="<?php echo set_value('r_tpc_1['.$i.']'); ?>"/></td>
            <td>
               <input type="text" name="r_tpc_2[]" id="r_tpc_2" size="10" value="<?php echo set_value('r_tpc_2['.$i.']'); ?>"/></td>
            <td>
                <input type="text" name="r_tpc_3[]" id="r_tpc_3" size="15" value="<?php echo set_value('r_tpc_3['.$i.']'); ?>"/></td>  
            <td>
                <input type="text" name="r_etr_1[]" id="r_etr_1" size="13" value="<?php echo set_value('r_etr_1['.$i.']'); ?>"/></td>                                                  
        </tr>
        <?php } } else { ?>
        <tr>                                                                                               
           <td>
              <input type="text" name="tp_sal[]" id="tp_sal" size="5" value="<?php $a=set_value('tp_sal'); echo $a; ?>"/></td>
           <td>
              <input type="text" name="r_tpc_1[]" id="r_tpc_1" size="5" value="<?php $a=set_value('r_tpc_1'); echo $a; ?>"/></td>
           <td>
              <input type="text" name="r_tpc_2[]" id="r_tpc_2" size="10" value="<?php $a=set_value('r_tpc_2'); echo $a; ?>"/></td>
           <td>
              <input type="text" name="r_tpc_3[]" id="r_tpc_3" size="15" value="<?php $a=set_value('r_tpc_3'); echo $a; ?>"/></td>  
           <td>
              <input type="text" name="r_etr_1[]" id="r_etr_1" size="13" value="<?php $a=set_value('r_etr_1'); echo $a; ?>"/></td>                                                  
       </tr>
 <?php } } else {
     foreach($dtdetail as $detail) { ?>
       <tr>                                                    
          <td>
             <input type="text" name="tp_sal[]" id="tp_sal" size="5" value="<?php echo $detail->tp_sal; ?>"/></td>
          <td>
             <input type="text" name="r_tpc_1[]" id="r_tpc_1" size="5" value="<?php echo $detail->r_tpc_1; ?>"/></td>
          <td>
             <input type="text" name="r_tpc_2[]" id="r_tpc_2" size="10" value="<?php echo $detail->r_tpc_2; ?>"/></td>
          <td>
             <input type="text" name="r_tpc_3[]" id="r_tpc_3" size="15" value="<?php echo $detail->r_tpc_3; ?>"/></td>  
          <td>
             <input type="text" name="r_etr_1[]" id="r_etr_1" size="13" value="<?php echo $detail->r_etr_1; ?>"/></td>                                               
      </tr>
<?php } } ?>
</tbody>
<tfoot class="bg-primary">
    <tr>
       <td colspan="31" align="center">
           <?php if(!isset($dtdetail)) {?>
                 <button type="button" class="btn btn-sm btn-info" onClick="addRow('dataTable2')">New Row</button>
           <?php } else { ?>
                 <button type="button" class="btn btn-sm btn-info" onClick="addRow('dataTable2')">New Row</button>
           <?php } ?>
       </td>
   </tr>
</tfoot>
[.....]

<?php
$this->load->view('template/js2');
?>

以及js2文件中的表單導航腳本：

<script type="text/javascript">
  /*!
* formNavigation
* Copyright 2013 Ole Bjørn Michelsen <http://ole.michelsen.dk/>
* MIT license
*/
(function ($) {
    $.fn.formNavigation = function () {
        $(this).each(function () {
            $(this).find('input').on('keyup', function(e) {
                switch (e.which) {
                    case 39:
                        $(this).closest('td').next().find('input').focus(); break;
                    case 37:
                        $(this).closest('td').prev().find('input').focus(); break;
                    case 40:
                        $(this).closest('tr').next().children().eq($(this).closest('td').index()).find('input').focus(); break;
                    case 38:
                        $(this).closest('tr').prev().children().eq($(this).closest('td').index()).find('input').focus(); break;
                }
            });
        });
    };
})(jQuery);
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('.table').formNavigation();
    });
</script>

Answer 1

問題

發生這種情況是因為導航腳本僅在運行時才應用於表中的行。 因此，表單導航腳本在文檔就緒事件上運行：

$(document).ready(function () {
    $('.table').formNavigation();
});

當頁面的HTML結構被完全加載時（發生在調用addRow（）函數之前 ），將發生此事件。 調用addRow（）函數時，它將添加新行，但是此新行未應用表單導航事件處理程序。

解

要解決此問題，請添加$(row).formNavigation(); 到addRow（）函數的末尾。