웹마당넷 |[TABLE] 테이블 소트시키기 II

Javascript Example
제 목
[TABLE] 테이블 소트시키기 II
작성자
운영자
등록일
200807210102343
조회수
24,096
테이블 소트시켜주는 자바스크립트 소스입니다.
무제 문서
Name	Age	Position	Income	Gender
John	37	Managing director	90.000	Male
Susan	34	Partner	90.000	Female
David	29	Head of production	70.000	Male
Laura	29	Head of marketing	70.000	Female
Kate	18	Marketing	50.000	Female
Mona	21	Marketing	53.000	Female
Mike	21	Marketing	53.000	Male
Mark	25	Production	52.000	Male
Peter	33	Production	55.000	Male
Jennifer	24	Production	49.000	Female
David	25	Photography	51.000	Male
Anna	42	Head of photography	56.000	Female
Rita	30	Photography	54.000	Female
Magnus	25	Freelancer	65.000	Male
Johnny	29	Freelancer	63.000	Male
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>무제 문서</title>
	<style type="text/css">
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size:0.8em;

	}
	p{
		margin-bottom:0px;
		font-weight:bold;
	}
	
	/* Start layout CSS */
	.tableWidget_headerCell,.tableWigdet_headerCellOver,.tableWigdet_headerCellDown{	/* General rules for both standard column header and mouse on header of sortable columns */
		cursor:pointer;	
		border-bottom:3px solid #C5C2B2;
		border-right:1px solid #ACA899;
		border-left:1px solid #FFF;	
		background-color: #ECE9D8;
	}
	
	.tableWidget_headerCell{	/* Standard column header */
		border-top:2px solid #ECE9D8;
		
	}
	
	.tableWigdet_headerCellOver{	/* Rollover on sortable column header */
		border-top:2px solid #FFC83C;		
	}
	.tableWidget tbody .tableWidget_dataRollOver{	/* Rollover style on mouse over (Data) */
		background-color:#FFF;	/* No mouseover color in this example - specify another color if you want this */
	}
	
	.tableWigdet_headerCellDown{
		border-top:2px solid #FFC83C;	
		background-color:#DBD8C5;
		border-left:1px solid #ACA899;
		border-right:1px solid #FFF;			
	}
	.tableWidget td{
		margin:0px;
		padding:2px;
		border-bottom:1px solid #EAE9E1;	/* Border bottom of table data cells */
		
	}
	.tableWidget tbody{
		background-color:#FFF;
	}
	.tableWidget{
		font-family:arial;
		font-size:12px;	
		width:400px;
	}
		
	/* End layout CSS */
	
	
	div.widget_tableDiv {
		border:1px solid #ACA899;	/* Border around entire widget */
		height: 200px;
		overflow:auto;
		overflow-y:auto;
		overflow:-moz-scrollbars-vertical;
		width:400px;

	}
	
	html>body div.widget_tableDiv {
		overflow: hidden;
		width:400px;
	}

	.tableWidget thead{
		position:relative;
	}
	.tableWidget thead tr{
		position:relative;
		top:0px;
		bottom:0px;
	}



	.tableWidget .scrollingContent{
		overflow-y:auto;
		overflow:-moz-scrollbars-vertical;
		width:100%;

	}
	div.widget_tableDiv1 {		border:1px solid #ACA899;	/* Border around entire widget */
		height: 200px;
		overflow:auto;
		overflow-y:auto;
		overflow:-moz-scrollbars-vertical;
		width:400px;
}
    </style>
	
	<script type="text/javascript">
	/*
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	*/	
	var tableWidget_tableCounter = 0;
	var tableWidget_arraySort = new Array();
	var tableWidget_okToSort = true;
	var activeColumn = new Array();
	var arrowImagePath = "http://www.webmadang.net/javascript/images/";	// Path to arrow images
	
	function addEndCol(obj)
	{
		if(document.all)return;
		var rows = obj.getElementsByTagName('TR');
		for(var no=0;no<rows.length;no++){
			var cell = rows[no].insertCell(-1);
			cell.innerHTML = ' ';
			cell.style.width = '13px';
			cell.width = '13';

		}	
		
	}
	
	function highlightTableHeader()
	{
		this.className='tableWigdet_headerCellOver';
		if(document.all){	// I.E fix for "jumping" headings
			var divObj = this.parentNode.parentNode.parentNode.parentNode;
			this.parentNode.style.top = divObj.scrollTop + 'px';

		}
			
	}
	
	function deHighlightTableHeader()
	{
		this.className='tableWidget_headerCell';		
	}
	
	function mousedownTableHeader()
	{
		this.className='tableWigdet_headerCellDown';
		if(document.all){	// I.E fix for "jumping" headings
			var divObj = this.parentNode.parentNode.parentNode.parentNode;
			this.parentNode.style.top = divObj.scrollTop + 'px';
		}		
	}
	
	function sortNumeric(a,b){
		
		a = a.replace(/,/,'.');
		b = b.replace(/,/,'.');
		a = a.replace(/[^\d\-\.\/]/g,'');
		b = b.replace(/[^\d\-\.\/]/g,'');
		if(a.indexOf('/')>=0)a = eval(a);
		if(b.indexOf('/')>=0)b = eval(b);
		return a/1 - b/1;
	}
	

	function sortString(a, b) {

	  if ( a.toUpperCase() < b.toUpperCase() ) return -1;
	  if ( a.toUpperCase() > b.toUpperCase() ) return 1;
	  return 0;
	}	
	function cancelTableWidgetEvent()
	{
		return false;
	}
	
	function sortTable()
	{
		if(!tableWidget_okToSort)return;
		tableWidget_okToSort = false;
		/* Getting index of current column */
		var obj = this;
		var indexThis = 0;
		while(obj.previousSibling){
			obj = obj.previousSibling;
			if(obj.tagName=='TD')indexThis++;		
		}
		var images = this.getElementsByTagName('IMG');
		
		if(this.getAttribute('direction') || this.direction){
			direction = this.getAttribute('direction');
			if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
			if(direction=='ascending'){
				direction = 'descending';
				this.setAttribute('direction','descending');
				this.direction = 'descending';	
			}else{
				direction = 'ascending';
				this.setAttribute('direction','ascending');		
				this.direction = 'ascending';		
			}
		}else{
			direction = 'ascending';
			this.setAttribute('direction','ascending');
			this.direction = 'ascending';
		}
		
		
		
		if(direction=='descending'){
			images[0].style.display='inline';
			images[0].style.visibility='visible';
			images[1].style.display='none';
		}else{
			images[1].style.display='inline';
			images[1].style.visibility='visible';
			images[0].style.display='none';		
		}

		
		var tableObj = this.parentNode.parentNode.parentNode;
		var tBody = tableObj.getElementsByTagName('TBODY')[0];
		
		var widgetIndex = tableObj.id.replace(/[^\d]/g,'');
		var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
		if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
			var images = activeColumn[widgetIndex].getElementsByTagName('IMG');
			images[0].style.display='none';
			images[1].style.display='inline';
			images[1].style.visibility = 'hidden';
			if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');			
		}

		activeColumn[widgetIndex] = this;
		
		var cellArray = new Array();
		var cellObjArray = new Array();
		for(var no=1;no<tableObj.rows.length;no++){
			var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
			cellArray.push(content);
			cellObjArray.push(tableObj.rows[no].cells[indexThis]);
		}
		
		if(sortMethod=='N'){
			cellArray = cellArray.sort(sortNumeric);
		}else{
			cellArray = cellArray.sort(sortString);
		}
		
		if(direction=='descending'){
			for(var no=cellArray.length;no>=0;no--){
				for(var no2=0;no2<cellObjArray.length;no2++){
					if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
						cellObjArray[no2].setAttribute('allreadySorted','1');	
						tBody.appendChild(cellObjArray[no2].parentNode);				
					}				
				}			
			}
		}else{
			for(var no=0;no<cellArray.length;no++){
				for(var no2=0;no2<cellObjArray.length;no2++){
					if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
						cellObjArray[no2].setAttribute('allreadySorted','1');	
						tBody.appendChild(cellObjArray[no2].parentNode);				
					}				
				}			
			}				
		}
		
		for(var no2=0;no2<cellObjArray.length;no2++){
			cellObjArray[no2].removeAttribute('allreadySorted');		
		}

		tableWidget_okToSort = true;
		
		
	}
	
	function initTableWidget(objId,width,height,sortArray)
	{
		width = width + '';
		height = height + '';
		var obj = document.getElementById(objId);
		obj.parentNode.className='widget_tableDiv';
		if(navigator.userAgent.indexOf('MSIE')>=0){
			obj.parentNode.style.overflowY = 'auto';
		}		
		tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
		if(width.indexOf('%')>=0){
			obj.style.width = width;
			obj.parentNode.style.width = width;
		}else{
			obj.style.width = width + 'px';
			obj.parentNode.style.width = width + 'px';
		}
		
		if(height.indexOf('%')>=0){
			//obj.style.height = height;		
			obj.parentNode.style.height = height;			
			
		}else{
			//obj.style.height = height + 'px';		
			obj.parentNode.style.height = height + 'px';
		}
		obj.id = 'tableWidget' + tableWidget_tableCounter;
		addEndCol(obj);
		
		obj.cellSpacing = 0;
		obj.cellPadding = 0;
		obj.className='tableWidget';
		var tHead = obj.getElementsByTagName('THEAD')[0];
		var cells = tHead.getElementsByTagName('TD');
		for(var no=0;no<cells.length;no++){
			cells[no].className = 'tableWidget_headerCell';
			cells[no].onselectstart = cancelTableWidgetEvent;
			if(no==cells.length-1){
				cells[no].style.borderRight = '0px';	
			}
			if(sortArray[no]){
				cells[no].onmouseover = highlightTableHeader;
				cells[no].onmouseout =  deHighlightTableHeader;
				cells[no].onmousedown = mousedownTableHeader;		
				cells[no].onmouseup = highlightTableHeader;		
				cells[no].onclick = sortTable;	
				
				var img = document.createElement('IMG');
				img.src = arrowImagePath + 'arrow_up.gif';
				cells[no].appendChild(img);	
				img.style.visibility = 'hidden';
				
				var img = document.createElement('IMG');
				img.src = arrowImagePath + 'arrow_down.gif';
				cells[no].appendChild(img);	
				img.style.display = 'none';
				
				
			}else{
				cells[no].style.cursor = 'default';	
			}
			
			
		}		
		var tBody = obj.getElementsByTagName('TBODY')[0];
		if(document.all && navigator.userAgent.indexOf('Opera')<0){
			tBody.className='scrollingContent';
			tBody.style.display='block';			
		}else{
			tBody.className='scrollingContent';

			if(tBody.offsetHeight>(tBody.parentNode.parentNode.offsetHeight - 50)) { 
				tBody.style.height = (obj.parentNode.clientHeight-tHead.offsetHeight) + 'px'; 
			}else{ 
				tBody.style.overflow='hidden'; 
			} 
			if(navigator.userAgent.indexOf('Opera')>=0){
				obj.parentNode.style.overflow = 'auto';
			}
		}
		
		for(var no=1;no<obj.rows.length;no++){
			obj.rows[no].onmouseover = highlightDataRow;
			obj.rows[no].onmouseout = deHighlightDataRow;
			for(var no2=0;no2<sortArray.length;no2++){	/* Right align numeric cells */
				if(sortArray[no2] && sortArray[no2]=='N')obj.rows[no].cells[no2].style.textAlign='right';
			}
		}
		for(var no2=0;no2<sortArray.length;no2++){	/* Right align numeric cells */
			if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='right';
		}		
		
		tableWidget_tableCounter++;
	}
	
	
	function highlightDataRow()
	{
		if(navigator.userAgent.indexOf('Opera')>=0)return;
		this.className='tableWidget_dataRollOver';
		if(document.all){	// I.E fix for "jumping" headings
			var divObj = this.parentNode.parentNode.parentNode;
			var tHead = divObj.getElementsByTagName('TR')[0];
			tHead.style.top = divObj.scrollTop + 'px';
			
		}	
	}
	
	function deHighlightDataRow()
	{
		if(navigator.userAgent.indexOf('Opera')>=0)return;
		this.className=null;
		if(document.all){	// I.E fix for "jumping" headings
			var divObj = this.parentNode.parentNode.parentNode;
			var tHead = divObj.getElementsByTagName('TR')[0];
			tHead.style.top = divObj.scrollTop + 'px';
		}			
	}
	
	</script>
</head>

<body>
<div class="widget_tableDiv1">
  <table id="myTable">
    <thead>
      <tr>
        <td>Name</td>
        <td>Age</td>
        <td>Position</td>
        <td>Income</td>
        <td>Gender</td>
      </tr>
    </thead>
    <tbody class="scrollingContent">
      <tr>
        <td>John</td>
        <td>37</td>
        <td>Managing director</td>
        <td>90.000</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Susan</td>
        <td>34</td>
        <td>Partner</td>
        <td>90.000</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>David</td>
        <td>29</td>
        <td>Head of production</td>
        <td>70.000</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Laura</td>
        <td>29</td>
        <td>Head of marketing</td>
        <td>70.000</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>Kate</td>
        <td>18</td>
        <td>Marketing</td>
        <td>50.000</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>Mona</td>
        <td>21</td>
        <td>Marketing</td>
        <td>53.000</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>Mike</td>
        <td>21</td>
        <td>Marketing</td>
        <td>53.000</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Mark</td>
        <td>25</td>
        <td>Production</td>
        <td>52.000</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Peter</td>
        <td>33</td>
        <td>Production</td>
        <td>55.000</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Jennifer</td>
        <td>24</td>
        <td>Production</td>
        <td>49.000</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>David</td>
        <td>25</td>
        <td>Photography</td>
        <td>51.000</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Anna</td>
        <td>42</td>
        <td>Head of photography</td>
        <td>56.000</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>Rita</td>
        <td>30</td>
        <td>Photography</td>
        <td>54.000</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>Magnus</td>
        <td>25</td>
        <td>Freelancer</td>
        <td>65.000</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Johnny</td>
        <td>29</td>
        <td>Freelancer</td>
        <td>63.000</td>
        <td>Male</td>
      </tr>
    </tbody>
  </table>
</div>
<script type="text/javascript">
initTableWidget('myTable',500,250,Array('S','N',false,'N','S'));
</script>


</body>
</html>
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
번호
제목
글쓴이