홈>
동적으로 생성 된 행과 입력이있는 테이블이 있는데, 아래쪽/위쪽 화살표를 누르면 커서가 마우스를 사용하지 않고 다음 또는 이전 텍스트 입력으로 이동할 수 있습니다. 나는 하나를 시도했지만 나를 위해 작동하지 않는 것 같습니다.
동적으로 생성 된 행이있는 테이블
<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 : 브라우저에서 페이지 로드 시 오디오 자동 재생
- javascript : jQuery 인라인을 어떻게 사용합니까?
- javascript : [복제] 클릭 시 버튼 색상 전환
- javascript : 버튼 클릭으로 커서를 변경하는 방법
- javascript : TypeError: data.forEach는 함수가 아닙니다.
- javascript : .click 토글 기능을 어떻게 재설정합니까?
- javascript : HTML 전화번호 유효성 검사
- javascript : jquery를 사용하여 카테고리에 따라 관련 없는 div를 페이드 아웃하는 메뉴
- javascript : html, css, js로 onclick 이벤트를 어떻게 할 수 있습니까?
- javascript : codepen.io 프로필 이미지 업로드 JQuery가 작동하지 않음
자바 스크립트를 다음과 같이 바꾸십시오 :
또한
tr
사이의 공백을 주목하십시오 그리고.num
코드에서<tr>
를 검색했기 때문에 첫 번째 줄에서 클래스num
와 함께 자식이 아닌