我想像处理第一张桌子一样专注于第二张桌子,但是我无法专注于第二张桌子.
(function ($) {
$.fn.formNavigation = function () {
$(this).each(function () {
$(this).find('input').on('keydown',function(e) {
if (e.which === 13 && !e.shiftKey) {
if ($(this).closest('td').next().find('input').length>0) {
e.preventDefault();
$(this).closest('td').next().find('input').focus();
} else if ($(this).closest('tr').next().children().eq(1).find('input').length>0) {
e.preventDefault();
$(this).closest('tr').next().children().eq(0).find('input').focus();
} else if ($(this).siblings('table')) {
//$(this).closest('table').find('tr').children().eq($(this).closest('td').index()).find('input').focus();
}
}
});
});
};
})(jQuery);
$('.gridexample').formNavigation();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="gridexample">
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
<table class="gridexample">
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>有什么办法可以把重点放在第二张桌子上吗？ -> tr-> td
最佳答案
操纵jQuery Collection
看起来您希望Enter / Return键像Tab键一样工作？如果是这样,则将标签定位为jQuery集合(即$(‘input’)),然后绑定到顶级祖先标签-集合中所有标签共享的祖先(即$(‘table’) ).扩展名已修改,因此您可以传入祖先和集合参数的任何选择器,因此现在您可以定位任何对象,而不仅仅是输入.
演示1是OP问题中所需的设置-在表中输入.
演示2设置了一个混合集合-textarea,并以表格形式进行选择.
演示1
(function($) {
$.fn.enterNav = function(collection) {
$(collection).on('keydown',function(e) {
var idx = $(this).index(collection);
if (e.which === 13 && !e.shiftKey) {
$(collection).eq(idx + 1).focus();
}
});
}
})(jQuery);
// $(ancestor).enterNav(collection)
$('table').enterNav('input');<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
<hr>
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>演示2
(function($) {
$.fn.enterNav = function(collection) {
$(collection).on('keydown',function(e) {
var idx = $(this).index(collection);
if (e.which === 13 && !e.shiftKey) {
$(collection).eq(idx + 1).focus();
}
});
}
})(jQuery);
// $(ancestor).enterNav(collection)
$('form').enterNav('textarea,select');<form>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<select>
<option>Looks</option>
<option>like</option>
<option>it</option>
</select>
<select>
<option>works</option>
<option>OK</option>
<option>?</option>
</select>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>