TABLE (10) 썸네일형 리스트형 table 상하좌우 스크롤(슬라이딩)시 특정 부분 위치 고정 원문 : https://www.codingfactory.net/13033 예전에는 자바스크립트로 프로그래밍 해 주던 영역인데, position:sticky 속성을 지원하는 CSS 에서는 간단하게 구현이 됩니다. 원문에서는 하나의 테이블에 대해서만 다루었는데, 위 아래로 여러 테이블이 있는 경우에는 id 가 아니라 class 방식으로 바꾸면 정상 작동합니다. 그러면, 이제 응용편을 하나 예로 들어 봅니다. 좌우 스크롤이 되는 table 인데.. (물론, table 을 감싸는 div 에 overflow-y:hidden 적용) 상단 칼럼은 colspan 으로 셀병합(엑셀 용어.. ㅋ)되어 있고, 칼럼이 많아서 좌우 스크롤 해야 하는데.. 상단 칼럼의 내용이 스크롤 할 때 계속 보여져야 한다면...? 간소하게 .. 웹화면의 특정 영역을 엑셀 파일로 저장할 때, a 링크 없애기 HTML 문서의 특정 DOM 구조를 엑셀 파일로 저장할 때.. 링크가 저장되는 것이 싫다면..? 특정 DOM 공간을 jquery 로 잡아서 복재 .clone() 하고, 복재된 영역에서 a 태그의 상위 태그에 a 태그의 텍스트 .text() 를 넣어 주고, 이를 엑셀로 저장. 여기에서는 HTML 문서를 엑셀로 저장하는 방법은 다루지 않습니다. ^^;; 이를테면 이런식이죠.. var $clone = $('#원본영역의아이디').clone(); // .clone() 원본과 다른 복재 영역이 생성 $clone.find('a').each(function(){ $(this).parent().html($(this).html()); // a 태그 상위 .parent() 태그에 a 태그의 내용을 넣음. 테스트이면 .tex.. CSS tr:first-child 사용해서 목록에 라인 긋기 아래 table 구조에서 table 의 외곽에 실선이 그려져 있는 상태인데,tr 마다 가로선을 그리고 싶다면.. ... ... ... ... ... ... ... ... ... 아래와 같이 모든 td 에는 위쪽으로 선을 그리고,첫 줄(tr:first-child td) 에서는 위쪽으로 선을 그리지 않게 하면 된다. 물론, 모든 td 아래쪽으로 선을 긋고,마지막 줄(tr:last-child) 에 아래쪽으로 선을 그리지 않게 해도 된다. td {border:none} DB 작업시 날아간 데이타 복원 1. Drop 된 테이블이면 DB 관리자 화면에서 RecycleBin 을 이용하여 복원 2. delete 된 레코드면, FlashBack 을 통해 insert 하여 복원 데이타 확인후 복원 요망. 오래된 것은 복원 불가 insert into 테이블명 select * From 테이블명 AS OF TIMESTAMP(SYSTIMESTAMP-INTERVAL '15' MINUTE); (상황에 따라 다르겠지만, 5일 정도 이내이면 찾을 수 있는듯..) select * from 테이블명 AS OF TIMESTAMP(SYSTIMESTAMP-INTERVAL '15' MINUTE) where 조건... ; minute 대신에 second, hour, day 등도 가능. 3. 플래시백https://jang2r.tistory.. table 태그에 col 태그를 동적으로 넣을때 유의사항 로 기본 세팅하고,.ajax 로 안에 있는 데이타를 동적으로 구성할 때..칼럼별 width 를 일정하게 세팅하려 한다면,$('#idTable').html(...) 와 같이 세팅하려 할 텐데..html() 함수 안에 '...' 내용을 넣으려면 colgroup 태그로 col 태그드을 감싸 주어야 한다. 이를테면,$('#idTable').html('......') 와 같이 해서는 col width 가 적용되지 않고 사라진다.IE 와 Chrome 모두 적용되는 사항이다. 아래와 같이 하면 col width 가 생각했던 것처럼 적용된다.$('#idTable').html('......')tr 태그들도 tbody 등으로 감싸주면 더 완벽할듯.. table 과 tr 태그들의 위치를 드래그 앤 드랍으로 처리 http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/ 원본http://roqkffhwk.tistory.com/entry/jQuery-tableDnD-%ED%85%8C%EC%9D%B4%EB%B8%94-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9C%84%EC%B9%98-%EB%93%9C%EB%9E%98%EA%B7%B8%EB%A1%9C-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0?viewbar 해설 CSS 와 jQuery, table 태그 등을 사용하여 목록 만들기 레이아웃이 아니라, 그리드 형태로 목록을 만들어야 하는 경우 table 태그를 사용하면 편합니다.아래 소개하는 목록은.. 목록의 맨 왼쪽과 맨 오른쪽 세로선이 없어요.가독성을 위해 짝수행에 배경색을 주고, 마우스 커서가 올려진 행에 배경색이 다르게 했어요.각 셀은 중앙정렬을 기본으로 하고 (아직 까지 모든 웹브라우저는 td 의 vertical-align 이 middle), 좌정렬과 우정렬은 클래스를 활용.셀에 입력된 글자가 많아질때 말줄임 표시를 할 수 있도록 세팅 .css 파일@charset "UTF-8" /* 혹시 문자셋 관계로 External CSS 를 사용하지 못한다면 사용 */table.tableList { table-layout:fixed; border-top:2px #EA0000 solid;.. table 태그로 표를 간단하게 (레이아웃 작성용 아닙니다) 칼럼1 칼럼2 칼럼3 칼럼4 칼럼5 칼럼6 값1 값2 값3 값4 값5 값6 값1 값2 값3 값4 값5 값6 table 태그는 width 가 100% 로 설정되므로 table 태그를 포함하는 쪽에서 width 를 적절하게 설정합니다.col 태그는 칼럼 갯수만큼 설정합니다. 여기에서는 폭을 설정하는 용도로만 사용.제목은 th 태그로 설정하고, 본문은 td 태그로 설정합니다.마우스 커서가 올려졌을때 본문 라인의 배경색을 바꾸는 것은 jQuery 로 구현하세요. (아래 내용 참조)td 는 기본적으로 중앙 정렬입니다. 좌정렬이 필요한 경우 class 에 left 를 추가합니다.td 태그의 class 에 dot 를 기술하면 폭을 넘어가는 문자열 대신에 말줄임표(...)가 대치되며,크롬/사파리/오페라/파이어폭스 등에.. 이전 1 2 다음
