홈>
동적으로 생성 된 행과 입력이있는 테이블이 있는데, 아래쪽/위쪽 화살표를 누르면 커서가 마우스를 사용하지 않고 다음 또는 이전 텍스트 입력으로 이동할 수 있습니다. 나는 하나를 시도했지만 나를 위해 작동하지 않는 것 같습니다.
동적으로 생성 된 행이있는 테이블
<table cellspacing="0" cellpadding="0" border="0" align="center" class="dave-table" id="TabsTabeUniformity">
<tbody><tr><th id="counter">No of rows: 3</th>
</tr></tbody><tbody>
<tr>
<td height="53"><div align="center">No.</div></td>
<td valign="middle" align="center"><p align="center">Tablets (mg)</p></td>
<td><button id="addRow">+ Add Row</button></td>
</tr>
<tr><td><div align="center">1</div></td>
<td><input type="text" tabindex="1" required="" class="num" size="25" name="tabdata[]" id="tcsv1"></td>
<td><button id="remRow">-Remove</button></td>
</tr><tr><td><div align="center">2</div></td>
<td><input type="text" tabindex="1" required="" class="num" size="25" name="tabdata[]" id="tcsv1"></td>
<td><button id="remRow">-Remove</button></td>
</tr><tr><td><div align="center">3</div></td>
<td><input type="text" tabindex="1" required="" class="num" size="25" name="tabdata[]" id="tcsv1"></td>
<td><button id="remRow">-Remove</button></td>
</tr><tr>
<td><div align="center">Average</div></td>
<td><input type="text" readonly="" name="average" id="av1"></td>
</tr>
</tbody>
<input type="hidden" id="tabStatus" name="tablet">
</table>
사용하려는 자바 스크립트
$(document).on('keydown','#TabsTabeUniformity > tbody tr.num',function (e) {
if (e.which === 40) {
$(this).closest('td').nextAll().eq(1).find('.num').focus()
}
});
모든 제안은 대단히 감사합니다
-
답변 # 1
-
답변 # 2
클래스 나 ID를 참조하지 않고 또는 행에 셀/입력을 추가하는 경우에도 이것을 사용할 수 있습니다 :
$("input").keydown(function (e) { var cellindex = $(this).parents('td').index(); if (e.which == 40) { $(e.target).closest('tr').nextAll('tr').find('td').eq(cellindex).find(':text').focus(); } if (e.which == 38) { $(e.target).closest('tr').prevAll('tr').first().find('td').eq(cellindex).find(':text').focus(); } });
관련 자료
- javascript - Onchange 선택 상자 jQuery를 사용하여 입력 상자 표시
- worksheet function - 다른 셀에 입력 된 수학 기호를 사용하여 수식을 작성하려면 어떻게해야합니까? Evaluate를 사용하는 방법?
- 고유 벡터에 대한 입력을 사용하는 것은 R 반짝임에서 작동하지 않습니다
- swift - 애니메이션을 사용하여 이동하는 동안 요소의 오프셋 가져 오기
- c++ - LoadCursor 대신 LoadImage ()를 사용하여 기본 커서로 창을 등록하는 방법은 무엇입니까?
- javascript - appendChild를 사용하여 요소를 이동하는 것이 JS에서 작동하지 않는 이유
- C의 배열을 사용하여 정수 입력을 숫자로 변환
- python - 및 조건과 함께 while 루프를 사용하여 두 값 사이에 숫자 입력
- javascript - angular set input cursor to next input, ps - next input tag will be dynamic added on keyenter of previous input c
- html - JavaScript를 사용하여 입력 유형 지정
- javascript - 사용자 입력을 사용하여 json 값 표시
- javascript - vuejs를 사용하여 버튼을 클릭 할 때 입력 필드를 바꾸는 방법은 무엇입니까?
- function - 사용자 입력, JavaScript를 사용하여 타이머 설정
- sprite kit - Spritekit 및 GameplayKit을 사용하여 Swift에서 목표로 움직이는 GKAgent2D를 어떻게 애니메이션 할 수 있습니까?
- 앵귤러 머티리얼을 사용하고 있습니다 입력 필드를 이메일로 보내는 방법
- python - 팬더, 목록의 입력을 사용하여 날짜 선택
- python - subprocesscall () 사용시 커서 로딩 애니메이션 방지
- c++ - 어레이 - 사용자 입력 사용
- C #을 사용한 사용자 입력 후 Python 출력을 C #에 표시
- django - jQuery를 사용하여 입력 필드에 '목록'속성을 어떻게 추가합니까?
관련 질문
- javascript - Div는 JQuery 숨기기 기능으로 숨기지 않습니다
- javascript - 부모가 위아래로 슬라이드하는 동안 이미지를 정적으로 유지
- javascript - HTML 양식 방법 대 jQuery 함수 유형
- javascript - 지연없이 올빼미 회전 목마 자동 재생
- javascript - ajax를 사용하여 페이지 매김에서 페이지 링크를 어떻게 처리 할 수 있습니까?
- javascript - typedjs 텍스트를 편집 가능하게 만드는 방법은 무엇입니까?
- javascript - 비동기를 사용하여 MathJax로 텍스트 미리보기
- javascript - 다중 레벨 드롭 다운 부트 스트랩 4, 하위 메뉴가 상위 드롭 다운 상단에 정렬
- javascript - 관련 div 전용 jQuery를 분리하고 추가하는 방법
- javascript - 마우스를 올리거나 클릭하면 해당 이미지가 표시됩니다
자바 스크립트를 다음과 같이 바꾸십시오 :
또한
tr
사이의 공백을 주목하십시오 그리고.num
코드에서<tr>
를 검색했기 때문에 첫 번째 줄에서 클래스num
와 함께 자식이 아닌