고정 테이블 헤더 및 스크롤 가능 columns_javascript 기술의 효과

표의 머리글을 똑바로 유지해야 하는 경우가 많고 목록을 스크롤할 수 있는 경우가 많으며, 데이터가 많을 때 보기 쉽게 하기 위해 주로 사용합니다

<title>고정된 테이블 헤더와 스크롤 가능한 열의 효과 - 스크립트 홈</title> <style type="text/css"> 몸 { 글꼴 모음: "arial", "helvetica", "sans-serif", ""; 글꼴 크기: 9pt; 여백: 0px; 스크롤바-얼굴-색상:#efefe7; 스크롤바-강조-색상:#ffffff; 스크롤바-3dlight-color:#a5a5a5; 스크롤바-어두운 그림자-색상:#a5a5a5; 스크롤바-그림자-색상:#d6d6ce; 스크롤바-화살표-색상:#003184; 스크롤바 트랙 색상:#deded6; } 테이블 { 글꼴 모음: "arial", "helvetica", "sans-serif",""; 글꼴 크기: 9pt; 줄 높이: 150%; 색상: #000000; } .display-tb2 { 테두리 오른쪽: #808080 1px 솔리드; 테두리 상단: #808080 1px 솔리드; 테두리 왼쪽: #808080 1px 솔리드; 테두리 하단: #808080 1px 솔리드; 테두리:0; 셀패딩:2; 셀 간격:0; 여백 상단:2px; 테두리 축소:축소; } div.tableContainer { 오버플로-x:자동; 너비:760px; dyn-행동:표현식( onscroll == null? (onscroll = 함수(){ if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return; var oGridBody = document.getElementById("order_GridBody"); oGridBody.style.width = parsInt(event.srcElement.clientWidth) event.srcElement.scrollLeft "px"; event.srcElement.oldScroll == event.srcElement.scrollLeft; }):진실, onmousedown == null? (onmousedown = 함수(){ if(self.currentTH != null) return; var obj = document.elementFromPoint(event.x,event.y); var objL = document.elementFromPoint(event.x - 1,event.y); if(obj.tagName.toLowerCase() == "일") { if(objL.tagName.toLowerCase() == "일") { obj = objL; } if(obj.className == "고정") return; self.currentX = event.x; self.currentTH = obj.childNodes[0]; self.currentTH.setCapture(); } }):진실, onmouseup == null? (onmouseup = 함수(){ if(self.currentTH != null) { self.currentTH.releaseCapture(); self.currentTH = null; } }):진실, onmousemove == null? (onmousemove = 함수(){ if(self.currentTH != null) { var width = Math.round(parseInt(self.currentTH.clientWidth) event.x - self.currentX); if(너비 < 0) 너비 = 0; var dt = parsInt(self.currentTH.style.width) - 너비; self.currentTH.style.width = 너비; __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width); self.currentX = event.x; } }):진실, self.__resizeCell == null? (self.__resizeCell = 함수(idx, 너비){ var 셀 = document.getElementById("order_GridBody_Cells"); var 행 =cells.childNodes; var 나는 = 0; for (var i = 0; i < 행.길이; i ) { var cell = 행[i].childNodes[idx].childNodes[0]; var ResetPattern = /style=[^stn] /; cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" width "'"); } }):진실 ) } div.body컨테이너 { 높이:250px; 너비:760px; 오버플로-x:숨김; 오버플로-y:자동; } div.gridCell_standard { 너비:100px; 오버플로:숨김; nw:표현식(this.noWrap=true); 왼쪽 여백: 0px; 여백 오른쪽: 1px; 왼쪽 패딩: 2px; 커서:기본값; } div.gridCell_narrow { 너비:30px; 오버플로:숨김; 왼쪽 여백: 0px; 여백 오른쪽: 1px; 왼쪽 패딩: 2px; nw:표현식(this.noWrap=true); 커서:기본값; }일 { 테두리 오른쪽: #a4a6a4 1px 솔리드; 테두리 상단: #a4a6a4 1px 솔리드; 테두리 왼쪽: #a4a6a4 1px 단색; 테두리 하단: #a4a6a4 1px 솔리드; 배경 이미지: url(images/default/headerbg.gif); 색상:#ffffff; 글꼴 스타일:일반; 글꼴 두께:일반; 높이:20px; 커서:열 크기 조정; dyn-행동:표현식( ondblclick == null? (ondblclick = 함수() { var src = event.srcElement; if(event.srcElement.tagName.toLowerCase()!="div") { src = src.childNodes[0]; } src.style.width = ""; __resizeCell(src.columnIndex,src.clientWidth); }):진실 ) } 일.고정 { 테두리 오른쪽: #a4a6a4 1px 솔리드; 테두리 상단: #a4a6a4 1px 솔리드; 테두리 왼쪽: #a4a6a4 1px 단색; 테두리 하단: #a4a6a4 1px 솔리드; 배경 이미지: url(images/default/headerbg.gif); 색상:#ffffff; 글꼴 스타일:일반; 글꼴 두께:일반; 높이:20px; 커서:기본값; } tr.odd { 테두리 오른쪽: #a4a6a4 1px 솔리드; 테두리 상단: #a4a6a4 0px 솔리드; 테두리 왼쪽: #a4a6a4 0px 단색; 테두리 하단: #a4a6a4 1px 솔리드; 랩 없음; } tr.even { 테두리 오른쪽: #a4a6a4 1px 솔리드; 테두리 상단: #a4a6a4 0px 솔리드; 테두리 왼쪽: #a4a6a4 0px 단색; 테두리 하단: #a4a6a4 1px 솔리드; } td.홀수_짝수 { 테두리 오른쪽: #a4a6a4 1px 솔리드; 테두리 상단: #a4a6a4 1px 솔리드; 테두리 왼쪽: #a4a6a4 1px 단색; 테두리 하단: #a4a6a4 1px 솔리드; 랩 없음; } td.select-cell { 테두리 오른쪽: #a4a6a4 1px 솔리드; 테두리 상단: #a4a6a4 1px 솔리드; 테두리 왼쪽: #a4a6a4 1px 단색; 테두리 하단: #a4a6a4 1px 솔리드; } 일{ 색상:#ff0000; } </style> <div class="tableContainer" id="order_Container"> <!--动态表格--> <table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order"> <tr> <td> <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0"> <thead> <th class="fixed"><div columnindex="0" class="gridCell_narrow">选择</div></th> <th><div columnindex="1" class="gridCell_standard">订单编号</div></th> <th><div columnindex="2" class="gridCell_standard">订货日期</div></th> <th><div columnindex="3" class="gridCell_standard">订货单位</div></th> <th><div columnindex="4" class="gridCell_standard">订单类别</div></th> <th><div columnindex="5" class="gridCell_standard">产品类别</div></th> <th><div columnindex="6" class="gridCell_standard">版本号</div></th> <th><div columnindex="7" class="gridCell_standard">订货金额</div></th> <th><div columnindex="8" class="gridCell_standard">订单状态</div></th> </thead> </table> </td> </tr> <!--<tfoot> 총 3페이지 </tfoot>--> <tbody> <tr class="odd"> <td colspan="9"> <div id="order_GridBody" class="bodyContainer"> <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0"> <tbody id="order_GridBody_Cells"> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="2"></div> </td> <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">19</div></td> <td class="odd_even"><div class="gridCell_standard">직판</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">취소됨</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="3"></div> </td> <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">19</div></td> <td class="odd_even"><div class="gridCell_standard">구매 및 판매</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="4"></div> </td> <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">구매 및 판매</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">취소됨</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="5"></div> </td> <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">직판</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">1.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="6"></div> </td> <td class="odd_even"><div class="gridCell_standard">tytutyjh465456</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">구매 및 판매</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">제작부에서 검토했습니다</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="7"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">유통</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">제작부서에서 검토해 봤습니다</div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="8"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">유통</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">총대리점 검토 완료</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="9"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">유통</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">32.0000</div></td> <td class="odd_even"><div class="gridCell_standard">취소됨</div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="10"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">유통</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="11"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">유통</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="12"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">유통</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">취소됨</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="13"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">유통</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">취소됨</div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="14"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">유통</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">취소됨</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="15"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">유통</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">취소됨</div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="16"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">유통</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">취소됨</div></td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> <div style="height:15px"></div> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]