본문 바로가기

BMS/javaScript

TABLE과 TARGET TABLE 타이틀 Width match,CELL 병합

    <%--
    ************************************************************
    * 검색후 처리(OBJ TABLE과 TARGET TABLE 타이틀 Width match,CELL 병합)
    ************************************************************
    --%>
    function fncSearchResult(result) {
     if(oListResult.rows.length > 0){
      <%-- Item Details 디자인 정렬 --%>
         gfn_tableTitleMatch(oListResult,oListTitle);
     }    
        //document.all.oList.style.height=document.all.oListResult.clientHeight+18;
    }

===================================================================================================

/**
 * OBJ TABLE과 TARGET TABLE 타이틀 Width match
 */
function gfn_tableTitleMatch(srcTable, targetTable) {

    try{
        //*srcTable에 데이타가 없을 경우는 실행하지 아니한다.
        if(srcTable.rows(0).cells.length <= 1){
            return;
        }

        //*srcTable크기대로 targetTable을 맞춘다.
        for(var i=0; i < srcTable.rows(0).cells.length; i++){           
             srcTable.rows(0).cells(i).width = srcTable.rows(0).cells(i).clientWidth - 4;
             targetTable.rows(0).cells(i).width = srcTable.rows(0).cells(i).width;            
       }//end of for//
       

        //*스크롤이 생겼다면 두 테이블의 사이즈가 다른것이다.
        if(srcTable.offsetWidth != targetTable.offsetWidth){
            targetTable.width = srcTable.offsetWidth;            
         }

         //*스크롤이 있을 경우 공백을 채우기 위한 오브잭트가 존재 한다면 삭제
         if(document.all[srcTable.id+"-x"] == undefined || document.all[srcTable.id+"-x"] == null){
             var obj=document.createElement("div");
 
             obj.id              = srcTable.id+"-x";
             obj.style.position  = "absolute"; // 객체에 대해 속성을 설정한다…
             obj.style.border    = "0 solid";
             obj.style.zIndex    = "0";
             obj.style.height    = targetTable.offsetHeight;
             obj.innerHTML = "<table width=17 height=100% border=0 cellspacing=0 cellpadding=2 class=tbl_white><tr class=tr_title><td class=last>&nbsp;</td></tr></table>";
 
             if(document.frm==undefined) document.body.appendChild(obj);
             else document.frm.appendChild(obj);
         document.all[srcTable.id+"-x"].style.top    = targetTable.parentNode.offsetTop;
         document.all[srcTable.id+"-x"].style.left   = targetTable.parentNode.offsetWidth+3;
        
        }

    }catch(e){alert(e);}
}

=====================================================================================================

<div style="width:100%;overflow-x:auto;overflow-y:hidden;border:0 solid;display:">
             <div id="oTitle" style="width:100%;overflow:hidden;border:0 solid;display:">
                <table id="oListTitle" width="100%" border="0" height="23" cellspacing="0" cellpadding="2" class="tbl">
                 <tr>
                <td class="tbl_title"  align="center"><input type='checkbox' style='border:0px' name='chkAll' id='selectNumX' value='"+rowCnt+"' onClick="allSelected();"/></td>
                   <td class="tbl_title"  align="center">NO</td>
                   <td class="tbl_title"  align="center">Investment Type</td>
       <td class="tbl_title"  align="center"><font color="#CD3C3C">Item Description</font></td>
       <td class="tbl_title"  align="center">위치정보</td>
                   <td class="tbl_title"  align="center">설비분류</td>
                   <td class="tbl_title"  align="center">설비가</td>
                   <td class="tbl_title"  align="center">부대비</td>
                   <td class="tbl_title"  align="center">Total</td>
                 </tr>
               </table>
             </div>
             <div id="oList" style="width:100%;height:75;overflow-y:hidden;overflow-x:auto;border:0 solid;display:" onscroll="fncScrollLeft('oTitle','oList','oPageNavigator');"></div>
          </div>