タブキーをナビゲートしたいのですが、focus()が機能していません。これはブートストラップテーブルです。これが私のコードです。最後の2行を確認してください。n個のセルをクリックして再度ナビゲートすると、機能します。
テーブルコード:
<table class="table table-bordered" id="tab1">
<thead class="mbhead">
<tr class="mbrow">
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>asd</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>ddd</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</body>
</table>
コードの編集:
function init(){
$("#tab1 tr td:not(:first-child)").on("click", function (e) {
console.log(e);
mytd=$(this);//mytd is defined here
if(e.currentTarget.contentEditable != null){
$(e.currentTarget).attr("contentEditable",true);
}
else{
$(e.currentTarget).append("<input type='text'>");
}
});
$(this).keydown(function (event) {
if (event.keyCode == 9){ // tab key for navigation
event.preventDefault();
$(mytd).next('td').html("abcd");//working
$(mytd).next('td').focus();//cursor is not moving
return false;
}
}
}
ありがとう。