테이블 요소의 입력 필드 : 클래스에 입력 할 수 있습니까?

Question

나는 자바 스크립트가 처음이다. Ondřej Žára는 제 자신의 프로젝트를위한 훌륭한 시작점 인 바닐라 js 스프레드 쉬트 (https://jsfiddle.net/user/ondras/fiddles/)를 작성했습니다. 그래서 그것을 해결하려고합니다. 다음은 그가 시트를 설정하는 방법입니다.

for (var i=0; i<6; i++) { 
    var row = document.querySelector("table").insertRow(-1); 
    for (var j=0; j<6; j++) { 
     var letter = String.fromCharCode("A".charCodeAt(0)+j-1); 
     row.insertCell(-1).innerHTML = i&&j ? "<input id='"+ letter+i +"'/>" : i||letter; 
    } 
} 

그런 다음 CSS를 사용하여 셀을 강조 표시합니다. 내가 원하는 모든 것입니다.

input { 
    border: none; 
    width: 60px; 
    font-size: 14px; 
    padding: 2px; 
} 

input:hover { 
    background-color: #eee; 
} 

input:focus { 
    background-color: #ccf; 
} 

input:not(:focus) { 
    text-align: right; 
} 

마지막으로 여기 내 문제가 있습니다. 셀은 모두 입력이며 CSS 키워드 "입력"에 의해 제어됩니다. 그러나 다른 입력 (버튼, 필드 등)을 추가하고 싶습니다. 그리고 모든 새로운 입력은 동일한 입력 스타일로 처리됩니다. 가장 깨끗한 일은 자신의 수업에 셀 입력을하는 것이지만 지금까지 나는 그 방법을 알아 내지 못했습니다 ...

(OK. 위장하기에는 너무 추한 해결 방법을 발견했습니다. : 테이블의 각 셀에 대해 위의 CSS 스타일을 중복 내 테이블 (48 개) 요소가 ...)

Answer 1

당신은 단지 동적으로 생성 된 입력에 클래스를 추가 할 수 있습니다.

row.insertCell(-1).innerHTML = i&&j ? "<input id='"+ letter+i +"' style='myInputClass' />" : i||letter 

그리고 당신의 CSS 클래스를 변경 input