탭 누름 이벤트를 처리하여 편집 가능한 html 테이블에 동적 사용자 정의 행을 추가합니다.

Question

편집 가능한 테이블을 만들었으며 기본 동작은 마지막 테이블 셀의 탭을 누른 다음 마지막 테이블에 새 행을 추가 할 때입니다.

이 이벤트 키를 동적 행에서 처리하려고합니다.

다른 문제는 새 표 셀에서 탭 커서 깜박임이 아닙니다. 다른 입력 할 때 작동합니다.

또한 백 스페이스는 표 셀을 제거하지 못합니다.

내가 핸들 키 다운이 시도 :

$(".table_desc tr").on('keydown', 'td', function(e) { 
    console.log("call keydown"); 
} 

하지만 페이지로드 만들어 해당 테이블 셀이 이벤트 호출.

언론 탭에서 CSS를 사용하여 커서를 깜박일 수 있습니까? 내 ck-editor 버전은 4.3.2입니다.

나는 최신 버전에서이 문제가 해결되었다고 생각하지만 4.3.2 버전을 처리하기위한 코드를 원한다.

$(document).ready(function() { 
 
    $("body").on('keyup', '.table_desc tr td', function(e) { 
 
    console.log("call keydown"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="table_desc" border="1" contenteditable="true"> 
 
    <tr> 
 
    <td>demo1</td> 
 
    <td>demo1</td> 
 
    <td>demo1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>demo1</td> 
 
    <td>demo1</td> 
 
    <td>demo1</td> 
 
    </tr> 
 
</table>

Answer 1

$(document).ready(function() { 
 
    $("body").on('keyup', '.table_desc tr td', function(e) { 
 
    console.log("call keydown"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="table_desc" border="1" contenteditable="true"> 
 
    <tr> 
 
    <td>demo1</td> 
 
    <td>demo1</td> 
 
    <td>demo1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>demo1</td> 
 
    <td>demo1</td> 
 
    <td>demo1</td> 
 
    </tr> 
 
</table>