은하의 신나는 개발이야기

보통 아래처럼 호출한 페이지의 스크립트는 

$(".Layer").load(url);

브라우저 개발자 도구에서 스크립트 소스가 안나온다. 

해당 페이지의 디버깅을 하기 위해 

디버깅을 원하는 위치에 

debugger;

기록함으로써 디버깅을 할 수 있는 방법이 있으나, 

개발자 도구에서 임의로 브레이크 포인트를 걸고 디버깅을 진행하는것 보단 불편하다. 

해서 찾아본 방법인데, 대박 -_-!

//# sourceURL= /path/filename

예)

//# sourceURL=/SubjectStrategy/ListAll.jsp

//@ sourceURL= /path/filename 

위처럼 엣 기호로도 처리할 수 있으나, 

The accepted form is now with a # (hashtag) rather than @ (at symbol)

The syntax was changed to to avoid conflicts with IE conditional compilation statements and some other issues

이런 이유로 # 기호를 선호한다. 

주의 사항으로는 기호 뒤에 공백 한칸이 필수이며, 주석 처리도 필수, 그리고 물리경로에 파일명을 기록해야 한다. 

//# sourceURL= /path/filename

출처 : http://stackoverflow.com/questions/13129904/how-do-i-debug-javascript-which-was-loaded-via-ajax-specifically-jquery

코딩하다보믄 -_- 숫자는 세자리수 단위로 기호표시 처리를 해주어야 할 때가 있는데, 

정규식으로 간편하게 처리하기.

정규식을 의외로 잘 안쓰는 사람들이 있는데 -_- 왜 그런진 내 알바아니나, 쓰면 좋다고 말해주고 싶다. 

// 부호 있는 정수 세자리 수 처리. 

function appendComma(n)

{

var reg = /(^[+-]?\d+)(\d{3})/;

n += '';

while(reg.test(n))

n = n.replace(reg, '$1' + ',' + '$2');

return n;

}

/* CSS */

.tblTitle{
   position:absolute;
/*    top:0px;
    margin-bottom:30px; */
    background:lightblue;
}
td, th{
    padding:5px;
    height:40px;
    width:40px;
    font-size:14px;
}

#vertical_scrolling_div{
    display:inline-block;
    zoom: 1;
    *display:inline;
/*    padding-top:40px; */
    height:300px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#freeze_container{
    display:inline-block;
    zoom: 1;
    *display:inline;
    vertical-align:top;
    width:100px;
}
#horizontal_scrolling_div{
    display:inline-block;
    zoom: 1;
    *display:inline;
    width:200px;
    overflow-x:scroll;
    vertical-align:top;
}

.freeze_table{  
    background-color: #0099dd;
    z-index:2;
}

#left_table{
    width:100px;
}

#inner_table{
    width:400px;
    overflow:hidden;
}

/* HTML */

<div id="vertical_scrolling_div">
    <div id="freeze_container">
        <table id="left_table" class="freeze_table">
            <tr class='tblTitle'>
                <th>Title 1</th>
                <th>Title 2</th>
            </tr>
        </table>
    </div>
    <div id="horizontal_scrolling_div">
        <table id="inner_table">
            <tr class='tblTitle'>
                <th>Title 3</th>
                <th>Title 4</th>
                <th>Title 5</th>
                <th>Title 6</th>
            </tr>
        </table>
    </div>
</div>

/* Script */

$(function(){ 
    function getRows(rows, cols){
        var rowString="";
        for(var i=0;i<cols;i++){
            rowString+="<tr>";
            for(var j=0;j<rows;j++){
                rowString+="<td>"+j+","+i+"</td>";
            }
            rowString+="</tr>";
        }
        return rowString;
    }
   
    $("#left_table").append(getRows(2,10));
    $("#inner_table").append(getRows(8,10));
});

CSS만 사용해서 테이블의 헤더 영역과 특정 컬럼을 고정하는 방법.

출처 : http://jsfiddle.net/C8Dtf/81/

헤더 영역 고정이야 늘 그렇듯 단순하게 처리하는 방법으로는

테이블 태그를 2개를 사용해 헤더 영역과 컨텐츠 영역으로 나누는 방법이 제일 간단하겠다.

그런데 여기에 특정 컬럼을 고정해야 하는 경우가 필요한데, 다른 플러그인은 사용하기 싫고 -_-ㅋ

그저 CSS로 조져보겠다는 생각이 무럭무럭 자라날때 사용하면 되겠다.

* 붉은 색으로 표시된 부분은 원본 소스에서 주석처리한 부분으로

div 위에 다른 컨텐츠들이 존재하는 경우 헤더가 비정상적으로 보여지는 부분 때문에 주석 처리함.