利用jquery实现在html的表格中使用上下左右键切换单元格,同时只限制单元格输入数字

最新推荐文章于 2026-01-06 15:22:38 发布

原创最新推荐文章于 2026-01-06 15:22:38 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #表格 #上下左右键

本文介绍了一种利用JavaScript为HTML表格中的单元格设置TabIndex的方法，并确保按照特定顺序进行焦点移动。同时，实现了对表格中输入框的数字输入限制功能。

因其他无关代码比较多，只贴关键代码，请谅解。

解释：

tblGrid是表格的id ，<pre name="code" class="html">onchange是每个单元格都拥有的方法，当然可以根据实际情况更改

flag是标志位，保证按照我想要的顺序新增tabindex

<script type="text/javascript">
    $(function() {
        var baseIndex = 100;
		var flag=1;
		$("#tblGrid").find("tr").each(function(r) {		
			
			if($(this).find("[onchange]").length >0){
				  $(this).find("[onchange]").each(function(c) {
						$(this).attr("tabindex", flag * 100 + c + baseIndex);
						
					});
				flag++;
			}    
			
        });
		
      });
</script>

<pre name="code" class="html">/**
			控制input框 限制只能输入数字
		*/
		function check(event) {  
				  var e = window.event || event;  	
				  var target = e.srcElement || e.target;  
				  var tabIndex=target.tabIndex;
				  var className=target.className;
				  var k = e.keyCode;  
				  if(isFunKey(k,tabIndex)) {  
					return true;  
				  }  
				  var c = getChar(k);  
				  if(target.value.length == '' && (c == '-' || c == '+')) {  
					return true;  
				  }  
				  if(isNaN(target.value + getChar(k))) {  
					return false;  
				  }  
				  return true;  
				}  
				  
		function isFunKey(code,tabIndex) {  
				  //  8 --> Backspace  
				  //  9 --> tab  
				  // 35 --> End  
				  // 36 --> Home  
				  // 37 --> ←
				  // 38 --> ↑
				  // 39 --> →
				  // 40 --> ↓ 
				  // 46 --> Delete  
				  // 112~123 --> F1~F12  
				  var funKeys = [8,9, 35, 36, 37,38, 39,40, 46];  
				  for(var i = 112; i <= 123; i++) {  
					funKeys.push(i);  
				  } 
				  
				  for(var i = 0; i < funKeys.length; i++) {  
					if(funKeys[i] == code) {
						
						if(funKeys[i]==38){
							tabIndex -= 100;	
							  $("input[tabindex=" + tabIndex + "]").focus();
							  return false;
						}else if(funKeys[i]==40){
							tabIndex += 100;
							 $("input[tabindex=" + tabIndex + "]").focus();
							  return false;
						}else if(funKeys[i]==37){
							  tabIndex--;
							 $("input[tabindex=" + tabIndex + "]").focus();
							  return false;
						}else if(funKeys[i]==39){
							tabIndex++;
							 $("input[tabindex=" + tabIndex + "]").focus();
							  return false;
						}						
								  
					  return true;  
					}  
				  }  
				  return false;  
				}