<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<link rel="stylesheet" type="text/css" href="./include/style.css">
<style>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.w50 {
width: 50px;
}
.w100 {
width: 100px;
}
.w150 {
width: 150px;
}
/*
상하 스크롤시 제목 고정
*/
table#fx-table thead { position: sticky; top: 0; z-index: 1; }
/*
좌우 스크롤시 두번째열 고정
*/
tr#firstTR td:nth-child(1) { position: sticky; left: 0px; }
tr#secondTR td:nth-child(1) { position: sticky; left: 0px;background-color:#D8DEEA; }
tr#secondTR td:nth-child(2) { position: sticky; left: 100px;background-color:#D8DEEA; }
tbody#fx-tbody td:nth-child(1) { position: sticky; left: 0px;background-color:#ffffff; }
tbody#fx-tbody td:nth-child(2) { position: sticky; left: 100px;background-color:#ffffff; }
</style>
</HEAD>
<BODY>
<table width="600" height="28" border="0" cellpadding="0" cellspacing="1">
<tr>
<td align="center">
<table width="100%" height="28" border="0" cellpadding="0" cellspacing="1">
<tr>
<td align="left">
<strong>상단 제목</strong>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="fx-table" width="600" style="word-break:break-all;">
<thead>
<tr id="firstTR" align="center">
<td width="200" colspan="2" align="right" style="border-top: 1pt solid #000000;border-right: 0.25pt solid #000000;border-bottom: 0.25pt solid #000000;" bgcolor="#ffffff">
고정제목
</td>
<td width="200" colspan="2" style="border-top: 1pt solid #000000;border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;" bgcolor="#FFFF00">
<b>그룹1</b>
</td>
<td width="100" style="border-top: 1pt solid #000000;border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;" bgcolor="#ffffff"><b>그룹4</b></td>
<td width="100" style="border-top: 1pt solid #000000;border-right: 1pt solid #000000;border-bottom: 0.25pt solid #000000;" bgcolor="#ffffff"><b>그룹5</b></td>
</tr>
<tr id="secondTR" align="center">
<td class="w100" data-strType="int" style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;cursor:hand;">
<b>숫자1</b>
</td>
<td class="w100" style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;cursor:hand;">
<b>문자1</b>
</td>
<td class="w100" style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;cursor:hand;" bgcolor="#ffffff">
<b>textbox1</b>
</td>
<td class="w100" style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;cursor:hand;" bgcolor="#ffffff">
<b>문자2</b>
</td>
<td class="w100" data-strType="int" style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;cursor:hand;" bgcolor="#ffffff">
<b>문자3</b>
</td>
<td class="w100" data-strType="txtbox" style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;cursor:hand;" bgcolor="#ffffff">
<b>문자4</b>
</td>
</tr>
</thead>
<tbody id="fx-tbody">
<tr height="40">
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
1
</td>
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
aaa
</td>
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
<input type="text" name="txt1" value="abc" size="5">
</td>
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
bbb
</td>
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
ccc
</td>
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
ddd
</td>
</tr>
<tr height="40">
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
2
</td>
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
eee
</td>
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
<input type="text" name="txt1" value="abc" size="5">
</td>
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
fff
</td>
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
ggg
</td>
<td style="border-right: 0.25pt dashed #000000;border-bottom: 0.25pt solid #000000;">
hhh
</td>
</tr>
<tr height="1000">
<td colspan="6">
-
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="./jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var elm = $('#SecondTR td');
for (var i = 0; i < elm.length; i++) {
elm[i].addEventListener('click', listener.bind( null, i) );
}
var sortType = 'asc'; // 정렬타입을 토글
function listener(index){
var table = $('#fx-table');
var dataTag = $("#secondTR td")[index];
var dataType = dataTag.getAttribute("data-strType"); //데이터형
sortType = (sortType =='asc')?'desc' : 'asc';
var checkSort = true;
var rows = table[0].rows;
while (checkSort) { // 현재와 다음만 비교하기때문에 위치변경되면 다시 정렬해준다.
checkSort = false;
for (var i = 2; i < (rows.length - 1); i++)
{
var fCell = rows[i].cells[index].innerHTML.toUpperCase();
var sCell = rows[i + 1].cells[index].innerHTML.toUpperCase();
fCell = fCell.replace(/[\n\t\r]/g,"");
sCell = sCell.replace(/[\n\t\r]/g,"");
if (dataType == "int") //데이터가 숫자형인 경우
{
fCell = fCell.replace(/<[^>]*>?/g,""); //태그제거
sCell = sCell.replace(/<[^>]*>?/g,"");
fCell = Number(fCell);
sCell = Number(sCell);
fCell = (fCell == 0 && sortType == "asc")? 99999999999 : fCell;
sCell = (sCell == 0 && sortType == "asc")? 99999999999 : sCell;
}
else if (dataType == "txtbox") //데이터가 textbox인 경우
{
fCell = fCell.match(/(?<=VALUE\=\")[0-9\-]{10}/); //value 값만 가져오기
sCell = sCell.match(/(?<=VALUE\=\")[0-9\-]{10}/);
fCell = (fCell == null && sortType == "asc")? "힣" : fCell;
sCell = (sCell == null && sortType == "asc")? "힣" : sCell;
}
else
{
fCell = fCell.replace(/<[^>]*>?/g,"");
sCell = sCell.replace(/<[^>]*>?/g,"");
fCell = (fCell == "" && sortType == "asc")? "힣" : fCell;
sCell = (sCell == "" && sortType == "asc")? "힣" : sCell;
}
var row = rows[i];
if ( (sortType == 'asc' && fCell > sCell) || (sortType == 'desc' && fCell < sCell) )
{
row.parentNode.insertBefore(row.nextSibling, row);
checkSort = true;
}
}
}
}
}
</script>
</BODY>
</HTML>