[英]Navigate form fields with arrow keys
我有一个带有“ 新行”功能脚本的表单。 然后,我从该站点添加了新的脚本导航表单字段 表单导航脚本
导航脚本仅 在行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>
发生这种情况是因为导航脚本仅在运行时才应用于表中的行。 因此,表单导航脚本在文档就绪事件上运行:
$(document).ready(function () {
$('.table').formNavigation();
});
当页面的HTML结构被完全加载时(发生在调用addRow()函数之前 ),将发生此事件。 调用addRow()函数时,它将添加新行,但是此新行未应用表单导航事件处理程序。
要解决此问题,请添加$(row).formNavigation();
到addRow()函数的末尾。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.