반응형 웹에서 테이블 구조를 사용하는 경우에, 모바일 화면에서는 테이블의 구조가 무너지는 경험을 자주 했기 때문에 해결을 위해 브라우저의 폭이 줄어들었을 경우에는 좌우의 스크롤을 통해서 테이블을 확인할 수 있도록 구현할 수 있습니다. 구현 방법은, 테이블을 두 개를 만들어서 하나의 테이블은 고정된 컬럼을 보여주기 위함 하나의 테이블은 스크롤을 통해서 보여질 테이블로써 사용합니다. 실제동작 확인 See the Pen Untitled by JONGIN CHOI (@jongin1004) on CodePen. 간단히 코드 설명 JS const table_container = document.querySelector('#table-scroll'); const table = document.querySelector..
IT 공부/Javascript
One Two Three Four Five select / option을 사용하면, 드롭박스 형태로 아이템을 표시할 수 있습니다. JS를 이용해서 다양한 조작을 할 수 있는데, 그 중에서 현재 선택된 option의 값을 가져오는 방법에 대해서 설명하겠습니다. selectedIndex dropBox.selectedIndex select요소에 selectedIndex 속성을 사용하면, 현재 선택되어진 option의 index 번호를 가져옵니다. 0부터 시작하게 되므로, 위에서 One이 선택되어 있다면, 0의 값을 가져오게 됩니다. options let seleted_idx = dropBox.selectedIndex; dropBox.options[selected_idx] options[idx]을 사용하게 되면..
원래 input 의 file 타입을 보면, 사진 처럼 되어있습니다. 이번에 만들어 볼려고 하는 것은, 위와 같은 UI를 버튼 하나로 변경해볼려고 합니다. 위의 코드를 입력하게 되면, 버튼 하나만 보이게되고 버튼을 클릭했을 때 input file이 클릭 되었을 때랑 동일한 기능이 실행됩니다.
HTML detail detail ... 각기 다른 value값을 지닌 button 여러개를 준비 JavaScript const buttons = document.querySelectorAll('#button') buttons.forEach(button => button.addEventListener('click', (e) => { console.log(e.target.value) })); 각 버튼 요소를 누르면, 각 요소의 value 값을 console.log로 출력시킴 각 버튼을 클릭해보면, 콘솔창에서 각 button요소의 value값이 출력되는 것을 확인할 수 있습니다.
제가 구현하고 싶었던 내용은 위의 사진처럼 체크박스가 여러개 존재하는데, 각 카테고리마다 내용이 중복이 되고있습니다. 그래서, 만약에 "행"의 카테고리에서 "keyword"를 선택하면, 다른 두개의 "열"과 "값"에서는 "keyword"를 선택 못하도록 막고싶었습니다. JS에대한 지식이 부족해서 검색해보면서, 무식하게 구현한 것 같지만.. CheckBox 태그
deleteContent 함수 생성 App.js deleteContent(_id) { let _content = null; let _contents = Array.from(this.state.contents); for (let i = 0; i < _contents.length; i++) { if (_contents[i].id === _id) { _contents.splice(i, 1) } } this.setState({ contents: _contents, mode: 'read', selected_content_id: 0, }) } delete에서도 마찬가지로 기본 array에는 영향이 없도록 Array.from()을 사용하고 있습니다. 그리고 splice 함수를 사용하는데, splice는 JS 문법으로..
