Ok tuşlarıyla form alanlarına gidin

Question

Yeni Satır işlev betiğiyle bir formum var. Sonra ben bu sitesinden yeni komut gezinmek formu alanları Form Navigation script

navigasyon script sadece Satır 1yılında çalışıyor eklendi. Ok tuşlarını kullanarak alanlar (sağdan sola, soldan sağa) arasında hareket edebilirim. i yeni satır eklerseniz, i (aşağı kadar kadar) 2 satır taşıyabilirsiniz, ancak (hiç yukarı aşağı ) i Row 1 geri hareket edemez ve ayrıca i (Row 2 alanlar arasında hareket edemez sağdan sola, sağdan sola). ben yine yeni bir satır, Row eklerseniz 3 komut hiç çalışmıyor gezinmek, ben sadece Row 1Row 2 (aşağı kadar kadar), Satır taşıyabilirsiniz 2Satır 3 çalışmıyor. İşte

benim kodudur, Yeni Satır senaryo:

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; 
     }    
    } 
} 

Formu kodu:

<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'); 
?> 

ve Formu Navigasyon senaryo yılında js2 dosyası:

<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

Sorun

navigasyon komut sadece koştu anda tabloda satırların için de geçerlidir, çünkü bu oluyor. Yani, form gezinti komut belge hazır olayı çalıştırılır:

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

sayfanın HTML yapısı AddRow() fonksiyonu hiç denir önce olan tam dolu olduğunda bu olay oluşur. AddRow() işlevi çağrıldığında, yeni bir satır ekler, ancak bu yeni satırda form gezgini olay işleyicileri uygulanmaz.

Çözüm

Bu sorunu gidermek için AddRow() fonksiyonu sonuna $(row).formNavigation(); ekleyin.