今天小喵找一下jQuery的綜合應用範例，看到黑暗大的一篇【利用上下左右鍵移動輸入焦點】，不過仔細看了一下，發現他上下移動是指定要切換的個數，所以一旦欄位增減時，就需要去改那個值。小喵就拿這個範例來小改一下，提供大家參考。
緣起
今天小喵找一下jQuery的綜合應用範例，看到黑暗大的一篇【利用上下左右鍵移動輸入焦點】，不過仔細看了一下，發現他上下移動是指定要切換的個數，所以一旦欄位增減時，就需要去改那個值。小喵就拿這個範例來小改一下，提供大家參考。
準備工作
小喵的方式，是在不同欄位的input裡面，擺上自訂的屬性subid，這樣方便抓到相同欄位的群組。例如放CName資料的subid="CName"。然後動態的抓取目前處發事件的subid，並且取得他在這個群組的index。剩下的工作就跟黑暗大沒啥兩樣，就是取得新的index，最後判斷在沒有超過範圍的情況下，去移動focus。詳細內容就直接看範例程式囉
範例：
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="Text/JavaScript" src="js/jQuery.js"></script>
<Script type="Text/JavaScript" Language="JavaScript">
$(document).ready(function(){
//當tbd裡所有的input
$('#tbd :input').keydown(function(e){
//取得自訂屬性的名稱
var mySubId=$(this).attr('subid');
//取得該物件的index
var idx=$('#tbd :input[subid="' + mySubId + '"]').index(this);
//取得相關物件的個數
var sidlen=$('#tbd :input[subid="' + mySubId + '"]').length;
//設定新的index
var newidx;
switch (e.which)
{
case 38: //上
newidx=idx-1;
break;
case 40: //下
newidx=idx+1;
break;
default:
newidx=idx;
return;
}
//如果沒有超出範圍，指到新的index
if(newidx>=0 && newidx<sidlen)
{
var tgEmt=$('#tbd :input[subid="' + mySubId + '"]:eq(' + newidx + ')')
tgEmt.select();
tgEmt.focus();
}
});
})
</Script>
</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
<table border="1">
<thead>
<tr>
<th>CName</th>
<th>Value</th>
</tr>
</thead>
<tbody id="tbd">
<tr>
<td><input type="text" id="txtCName1" subid="CName" value="CNameXX"></td>
<td><input type="text" id="txtValue1" subid="Value" value="ValueXX"></td>
</tr>
<tr>
<td><input type="text" id="txtCName2" subid="CName" value="CNameXX"></td>
<td><input type="text" id="txtValue2" subid="Value" value="ValueXX"></td>
</tr>
<tr>
<td><input type="text" id="txtCName3" subid="CName" value="CNameXX"></td>
<td><input type="text" id="txtValue3" subid="Value" value="ValueXX"></td>
</tr>
<tr>
<td><input type="text" id="txtCName4" subid="CName" value="CNameXX"></td>
<td><input type="text" id="txtValue4" subid="Value" value="ValueXX"></td>
</tr>
<tr>
<td><input type="text" id="txtCName5" subid="CName" value="CNameXX"></td>
<td><input type="text" id="txtValue5" subid="Value" value="ValueXX"></td>
</tr>
<tr>
<td><input type="text" id="txtCName6" subid="CName" value="CNameXX"></td>
<td><input type="text" id="txtValue6" subid="Value" value="ValueXX"></td>
</tr>
<tr>
<td><input type="text" id="txtCName7" subid="CName" value="CNameXX"></td>
<td><input type="text" id="txtValue7" subid="Value" value="ValueXX"></td>
</tr>
<tr>
<td><input type="text" id="txtCName8" subid="CName" value="CNameXX"></td>
<td><input type="text" id="txtValue8" subid="Value" value="ValueXX"></td>
</tr>
</tbody>
</table>
</FORM>
</BODY>
</HTML>
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |