홈>2020-02-01 00:28

javascript - 동적으로 생성 된 입력에서 아래쪽 화살표 키를 사용하여 커서를 다음 입력으로 이동

동적으로 생성 된 행과 입력이있는 테이블이 있는데, 아래쪽/위쪽 화살표를 누르면 커서가 마우스를 사용하지 않고 다음 또는 이전 텍스트 입력으로 이동할 수 있습니다. 나는 하나를 시도했지만 나를 위해 작동하지 않는 것 같습니다.

동적으로 생성 된 행이있는 테이블

<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()
    }
 });

모든 제안은 대단히 감사합니다

javascriptjqueryhtml

답변 # 1
자바 스크립트를 다음과 같이 바꾸십시오 :
```
$(document).on('keydown','#TabsTabeUniformity > tbody tr .num',function (e) {
    if (e.which === 40) {
      $(this).parents("tr").next("tr").find('.num').focus();
    }
 });
```
또한 tr 사이의 공백을 주목하십시오 그리고 .num 코드에서 <tr> 를 검색했기 때문에 첫 번째 줄에서 클래스 num 와 함께 자식이 아닌

답변 # 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();
    }
});

Python2.net

javascript - 동적으로 생성 된 입력에서 아래쪽 화살표 키를 사용하여 커서를 다음 입력으로 이동

관련 자료