이야기 마을

숨길경우는 scroll을 hidden으로 수정


<div style="width:730px; height: 488px;overflow-x:scroll; overflow-y:scroll;"></div>



=======================================
이거 참 괜찮은거 같다 스크롤이 필요할때가 있는데 그거땜에 프레임쓰기도 그렇고
따로 만들어서 쓰기도 그렇고 할튼 맘에 드는 스타일 -0-//

사실 스타일에 대해선 잘 모르는 나이기에 이런일이 발생하였다 ....ㅜㅜ

테이블에서 행 사이즈가 100이라고 가정할 경우
실 테이블의 행에 width를 100이라고 지정하고 스타일 패딩을 레프트10이라고 지정되면
실제로는 110의 사이즈를 갖게 된다


<style>
<!--
    .tbl_pad_l10 {padding-left:10px;}
    .tbl_pad_r10 {padding-right:10px;}
//-->
</style>

<table width="970"  border="0" cellspacing="0" cellpadding="0">
<COLGROUP>
  <COL width="65">
  <COL width="105">
  <COL width="80">
  <COL width="80">
  <COL width="80">
  <COL width="80">
  <COL width="80">
  <COL width="80">
  <COL width="80">
  <COL width="80">
  <COL width="80">
  <COL width="80">
</COLGROUP>

<tr>
<td rowspan="2" align="center">TEST1</td>
<td class="tbl_pad_l10" align="left">TEST2</td>
<td class="tbl_pad_r10">14,500</td>
<td class="tbl_pad_r10">14,500</td>
<td class="tbl_pad_r10">14,500</td>
<td class="tbl_pad_r10">14,500</td>
<td class="tbl_pad_r10">14,500</td>
<td class="tbl_pad_r10">14,500</td>
<td class="tbl_pad_r10">14,500</td>
<td class="tbl_pad_r10">14,500</td>
<td class="tbl_pad_r10">14,500</td>
<td class="tbl_pad_r10">14,500</td>
</tr>

</table>


위 테이블의 실사이즈는 1080이된다 제대로 사이즈가 출력되게 하려면 아래와 같이 사이즈를 수정해야한다.

<COLGROUP>
  <COL width="65">
  <COL width="95">
  <COL width="70">
  <COL width="70">
  <COL width="70">
  <COL width="70">
  <COL width="70">
  <COL width="70">
  <COL width="70">
  <COL width="70">
  <COL width="70">
  <COL width="70">
</COLGROUP>


패딩은 셀 내부에 걸었는데 왜 위와 같이 되는건지 사실 아직도 이해가 되지 않는다..ㅜㅜ

<script language="javascript">

function printTable(rst)
{
    //rst is array value

    var tblList     = document.getElementById("tblList");
    var nRow;
    var nCell;

    for(var i=0; i<rst.length; i++)
    {
        nRow = tblList.insertRow();
        nCell = nRow.insertCell(0);
        nCell.innerHTML = rst[i];
    }
}

/*
위와 같이 테이블에 Row를 추가하는 방법이 있다.(DHTML)
하지만 추가할 Cell이 많아지고 Row 또한 많아지게 되면
insertRow, insertCell 을 작업하는 동안 화면이 멈추게 된다.(무한루프 돌때나 다운이된경우처럼...)
좀 많이 루프를 돌면서 Table에 Row와 Cell을 추가하게 될 경우에 말이다.

그래서 고민하면서 찾게 된게...어차피 스크립트에서 스레드를 기대하기는 무리고
VB에서와 같이 DoEvents라는 메소드를 찾게되었다.
작업 진행 시간이야 어찌됐든 멈춰보이는것보다
작업이 진행되고있음을 알려주는것이 더 낳을거라 판단이 들었기때문이다.
*/


var g_tmrDrawID; //타이머 ID
var g_lstResult; //리턴 받은 결과값 저장
var g_nPosCurrentData = 0; //g_lstResult 결과 리스트 중 현재 작업 위치

function printTable(rst)
{
    //rst is array value

    //리턴값을 전역으로 저장
    g_lstResult = retVal;

    //현재 위치 초기화
    g_nPosCurrentData = 0;

    //타이머 초기화
    clearTimeout(g_tmrDrawID);

    //데이터 뿌려주는  함수 부르는  시키는 타이머 시작
    g_tmrDrawID = setTimeout("DrawTable()", 1);
}

function DrawTable()
{
    var tblList     = document.getElementById("tblList");
    var retVal     = g_lstResult; //전역으로 지정해놓은 리턴값을 로드
    var nRtnCount    = retVal.length; //리턴값 배열 갯수
    var i = g_nPosCurrentData; //g_lstResult 결과 리스트 중 현재 작업 위치
    var nRow;
    var nCell;


    nRow = tblList.insertRow();
    nCell = nRow.insertCell(0);
    nCell.innerHTML = retVal[i];

    //현재 위치가 리턴값 개수와 같지 않을 경우만 1ms 단위로 타이머 콜
    if(nRtnCount!=g_nPosCurrentData+1)
    {
        clearTimeout(g_tmrDrawID);
        g_tmrDrawID = setTimeout("DrawTable()", 1);
    }
    else
    {
        g_nPosCurrentData = 0; //현재 위치 초기화
        clearTimeout(g_tmrDrawID); //타이머 초기화
        g_lstResult = null; //전역 리턴값 초기화
    }

    //현재 위치 갱신
    g_nPosCurrentData++;
}

/*
찾다찾다 결국 못찾아 타이머를 이용해 만들어보기로 했다.
타이머를 이용해 행단위로 작업되기때문에 멈추지도 않고 쭈우우욱 삽입되는게 보여 생각한거랑
비슷하긴 하지만 한행 입력되는데 1ms의 텀이 있다는거~~~ ㅡㅡ;;;
작업되는시간까지 합치면 뭐 더 걸리겠지만...
할튼 그래도 시간이 좀 걸려서 그렇지 생각과 비슷하게는 만들어졌다.

타이머 콜을 제어하고 위치변수들을 제어하기 위해 소스가 원소스에 비해 두배이상 길어졌지만....
물론 DrawTable에 실작업되는부분은 try를 해서 예외처리를 해놓는것이 반복 요청등이나 뭐 그런 일이 생길때 유리하다
*/
</script>





사실 누구야 만들려한다면 못만들겠냐만은 이걸 만들기전에 자바스크립에서 DoEvents와 유사한 방법이 없을까 하는 방법들을 찾다찾다 VBScript를 찾다찾다(DoEvents는 당연 VB에서만 된다) 누가 유사하게 사용한거 없을까 찾다찾다 하도 생XX를 한게 생각이 나서....ㅋㅋ

<a href="test.html" onclick="alert('test');" id="id_value">test</a>

<script>

document.getElementById("id_value").onclick = function() {
    alert('test222222');
};

document.getElementById("id_value").href="http://www.zekill.pe.kr/";

</script>

====================================================
뭐 이름을 마땅히 붙이기 뭐해서 거창하게 오버라이딩이라 붙였지만
딱히 그런건 아니고 내용 변경이라는게 맞겠다....뭐 이런식으로도 사용가능하다는 얘기다.

encodeURIComponent(encodedURIString) 라는 내장 메소드가 있다
AJAX로 넘길때나 필요한 경우에 쓰기 좋은것 같다
물론 디코드도 있다 decodeURIComponent(encodedURIString)