홈>
동적으로 생성 된 행과 입력이있는 테이블이 있는데, 아래쪽/위쪽 화살표를 누르면 커서가 마우스를 사용하지 않고 다음 또는 이전 텍스트 입력으로 이동할 수 있습니다. 나는 하나를 시도했지만 나를 위해 작동하지 않는 것 같습니다.
동적으로 생성 된 행이있는 테이블
<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를 사용하여 입력 필드에 '목록'속성을 어떻게 추가합니까?
관련 질문
- CSS 스타일링과 함께 새로운 JavaScript 창 (.open)을 엽니 다.
- javascript : jQuery를 별도의 파일에 어떻게 넣으려면 어떻게합니까?
- javascript : jQuery 암호 강도 검사기 code 개선
- javascript : 이 점프 페이지를 만드는 것에 대해 어떻게해야합니까?
- javascript : Ajax Auto Reload 테이블은 실행되지 않습니다
- javascript : 검색 옵션이있는 선택 상자 만들기
- javascript : 백그라운드 색상 변경 원 안에 배열을 사용하는 항목
- javascript : 왜 먼저 클릭 한 후 두 번을 클릭하여 반전해야합니다.
- javascript : jQuery를 사용하여 innerhtml ()
- javascript : 이미지를 웹 사이트에서 모바일 사진 앨범에 저장하려면 어떻게합니까?
자바 스크립트를 다음과 같이 바꾸십시오 :
또한
tr
사이의 공백을 주목하십시오 그리고.num
코드에서<tr>
를 검색했기 때문에 첫 번째 줄에서 클래스num
와 함께 자식이 아닌