>

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

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

<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

    자바 스크립트를 다음과 같이 바꾸십시오 :

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

관련 자료

  • 이전 reactjs - 오류 - thisfriendchat이 함수가 아닙니다 (jquery + react)
  • 다음 android - 기기에서 반응 네이티브 코드 실행시 문제