> 웹 프론트엔드 > JS 튜토리얼 > HTC 데이터 table_javascript 기술 작성

HTC 데이터 table_javascript 기술 작성

WBOY
풀어 주다: 2016-05-16 19:20:34
원래의
1260명이 탐색했습니다.

작성자: xmg (小马哥)

코드 복사 코드는 다음과 같습니다.





<스타일>
본문{글꼴 크기:12}
테이블,입력,버튼,선택,텍스트 영역,b{글꼴-크기:12;글꼴-가족:宋体}
본문{배경:#ECE9D8}
td{border:1px solid #c0c0c0;display:inline}
.GridBorder{배경:#ece9d8;border:1px solid #000;border-top:1px solid #FFF;border-left:1px solid #FFF; text-align:center;WORD-BREAK:break-all}

<스크립트>
if(document.all){
    Event.prototype.__defineGetter__("srcElement",function(){var node=this.target;while(node.nodeType!=1){node=node.parentNode} return node})
    Event.prototype.__defineGetter__("x",function(){return this.clientX 2})
    Event.prototype.__defineGetter__("y",function(){return this.clientY 2 })
}
함수 $(obj){return document.getElementById(obj)}



  
    
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    
    
    
    
    
    
    
  
字段一 字段二 字段三 字段四 字段五 字段六 字段七 字段八 字段九



<script> <br>var obj=$("datagrid"),td <br>var body=document.body <br>var DragObj=null <br>var objxy=getxy(obj) <br>var Dragborder=0 <br>obj.style.cssText="배경:#FFF;border-collapse:collapse" <br>for(var i=0;i<obj.rows.length;i ){ <BR>    for(var j=0;j&lt ;obj.rows[i].cells.length;j ){ <BR>        td=obj.rows[i].cells[j] <BR>        if(i==0){ <BR>            td.className=" GridBorder" <BR>            td.style.cssText="font-weight:bold" <BR>        }else if(j==0){ <BR>           td.className="GridBorder" <BR>           td.style.cssText= "너비:15px" <BR>        }else{ <BR>           td.innerHTML="<input type=text value='" td.innerHTML.replace(/ /gi,'') "' style='width:100 %;테두리:0px'>" <br>        } <br>    } <br>} <br>var focus_img=document.createElement("IMG") <br>focus_img.src="http://bbs.51js.com/attachment.php?aid= 7290&noupdate=yes" <br>if(typeof(Dline)!="object"){ <br>    var Dragline=document.createElement("DIV") <br>    Dragline.id="Dline" <br>    Dragline.style .cssText="width:1px;border-left:1px solid #CCC;display:none;position:absolute" <br>    body.appendChild(Dragline) <br>} <br>obj.onclick=function(){ <br>    var e=event,tr <br>    var ee=e.srcElement <br>    if(ee.tagName=="INPUT"){ <br>        tr=ee.parentNode.parentNode <br>        obj.rows[tr .rowIndex].cells[0].appendChild(focus_img) <br>    } <br>} <br>obj.onmousemove=function(){ <br>    var e=event,tr <br>    var ee=e.srcElement <br>    if(ee.tagName=="TD"&&ee.parentNode.rowIndex==0&&ee.cellIndex>0){ <br>        var a=getxy(ee) <br>        if(event.x<(a[1 ] 5)||event.x>(a[1] a[2]-5)){ <br>            body.style.cursor="col-resize" <br>            objxy=getxy(obj) <br>        } else{ <br>            body.style.cursor="default" <br>        } <br>    } <br>} <br>obj.onmousedown=function(){ <br>    var e=event <br>    var ee= e.srcElement <br>    var a=getxy(ee) <br>    if(body.style.cursor=="col-resize"){ <br>        if(event.x<(a[1] 5)) <BR>           Dragborder=1 <BR>        else if(event.x>(a[1] a[2]-5)) <br>           Dragborder=2 <br>        else border=0 <br>        DragObj=ee <br>        $("Dline").style.left=e.x <br>        $("Dline").style.top=objxy[0] <br>        $("Dline").style.height=objxy[3 ] <br>        $("Dline").style.display="" <br>    } <br>} <br>body.onmousemove=function(){ <br>    if(DragObj!=null){ <br> $("Dline").style.left=event.x <br>        body.style.cursor="col-resize" <br>    } <br>}<br>body.onmouseup=function(){ <br>    if(DragObj!=null){ <br>        $("Dline").style.display="none" <br>        body.style.cursor="default " <br>        if(Dragborder==2){ <br>           var a=getxy(DragObj) <br>           var w=event.x-a[1] <br>            w=w<=0?0:w <br> DragObj.style.width=w <br>        } <br>        if(Dragborder==1){ <br>           var pnode=DragObj.previousSibling <br>            var a=getxy(pnode) <br>            var w=event.x-a [1] <br>            w=w<=0?0:w <br>           pnode.style.width=w <br>        } <br>        DragObj=null <br>    } <br>함수 get xy( e){ <br>    var a=new Array() <br>    var t=e.offsetTop; <br>    var l=e.offsetLeft; <br>    var w=e.offsetWidth; <br>    var h=e.offsetHeight; <br>    while(e=e.offsetParent){ <br>        t =e.offsetTop; <br>        l =e.offsetLeft; <br>    } <br>    a[0]=t;a[1]=l;a[2]=w;a[3]=h <br>  return a; <br>} <br></script>

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿