스마트 테이블_자바스크립트 스킬

작성자 llinzzi
버전 0.9
참고:
테이블의 입력에 초점이 없을 때 Enter 키를 누르면 마지막 행을 복사하고, 삭제 키를 누르면 마지막 행을 복사합니다.
선택 복사 및 삭제를 위한 체크박스
테이블을 두 번 클릭하면 해당 열의 기존 데이터를 자동으로 수집하는 메뉴가 나타납니다. 자동 완성을 선택하면 다음과 같은 하이라이트가 있습니다.
데이터는 ajax(사용자 정의 ajax 클래스, 블로그에 공개된 내용입니다.
IE6 및 Firefox1.5와 호환되며 W3C를 준수합니다
이 양식의 모든 기능은 입력 입력 작업을 줄이기 위한 것이며 대규모 프로젝트에서 공개적으로 사용하기에 적합합니다

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

HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">





<script> <BR><!-- <BR>///////////////////////////////////// ///장면화///////////////////////////////////// <BR>beginListen() ; <BR>///////////////////////////////////////면장화/// ////////////////////////////////// <BR>/////////// ///////////////////////////////ajax类////////////////// ///////////////////// <BR>함수 Ajax(url,recvT,stringS,resultF) { <BR>    this.url = url; <BR>    this.stringS = stringS; <BR>    this.xmlHttp = this.createXMLHttpRequest(); <BR>    if (this.xmlHttp == null) { <BR>        alert("erro"); <BR>        반품; <BR>    } <BR>    var objxml = this.xmlHttp; <BR>    objxml.onreadystatechange = 함수 (){Ajax.handleStateChange(objxml,recvT,resultF)}; <BR>} <br><br>Ajax.prototype.createXMLHttpRequest = function() { <BR>    시도 { return new ActiveXObject("Msxml2.XMLHTTP");    } catch(e) {} <BR>    시도해 보세요 { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} <BR>    시도 { 새 XMLHttpRequest() 반환;                   } catch(e) {} <BR>    null을 반환합니다. <BR>} <br><br>Ajax.prototype.createQueryString = 함수() { <BR>    var queryString = this.stringS; <BR>    return queryString; <BR>} <br><br>Ajax.prototype.get = function () { <BR>    url = this.url; <BR>    var queryString = url "?timeStamp="   new Date().getTime()   "&"   this.createQueryString(); <BR>    this.xmlHttp.open("GET",queryString,true); <BR>    this.xmlHttp.send(null); <BR>} <br><br>Ajax.prototype.post = function() { <BR>    url = this.url; <BR>    var url = url   "?timeStamp="   new Date().getTime(); <BR>    var queryString = this.createQueryString(); <BR>    this.xmlHttp.open("POST",url,true); <BR>    this.xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); <BR>    this.xmlHttp.send(queryString); <BR>} <br><br>Ajax.handleStateChange = 함수 (xmlHttp,recvT,resultF) { <BR>    if (xmlHttp.readyState == 4) { <BR>        if (xmlHttp.status == 200) { <BR>        resultF(recvT?xmlHttp.responseXML:xmlHttp.responseText); <BR>        } else { <BR>        alert("您所请求的页面有异常。"); <BR>        } <BR>    } <BR>} <BR>/////////////////////////////// //////////ajax类///////////////////////////////////// / <br><br>////////////////////////////////////////处理鼠标事件///////////////////////////////////// <BR>//表格变color <BR>var toBeColor = "#F8F9FC"; <BR>var backColor = "#FFFFFF"; <BR>function onChangTrColor(obj) { <BR>    obj.parentNode.style.BackgroundColor <BR>    obj.style.groundColor; = toBeColor; <BR>    var inputs = obj.parentNode.parentNode.getElementsByTagName("input"); <BR>    for(var i = 0; i < inputs.length; i  ){ <BR>        입력. style.BackgroundColor <BR>        inputs[i].parentNode.style.BackgroundColor = toBeColor; <BR>    } <BR>} <br><br>function outChangTrColor(obj) { <BR>    obj.parentNode.style .backColor = backColor; <BR>    obj.style.backColor = backColor; <BR>    var inputs = obj.parentNode.parentNode.getElementsByTagName("input"); 길이;  i  ){ <BR>        입력[i].style.backColor = backColor; <BR>        입력[i].parentNode.style.BackgroundColor = backColor; <BR>    } <BR>} <BR><br>/////////////////////////////////// //////处理鼠标事件///////////////////////////////////// <br><br>///////////////////////////////////////////////////////////// /////////////////////////////////// <br>//复复所选 <BR>함수 copySelect(){ <BR>    var checkboxs = document.getElementsByName("checkbox"); <BR>    for (var i=0; i<checkboxs.length; i ) { <BR>        if(checkboxs[i].checked == true){ <BR>        checkboxs[i].checked = false; <BR>        copyTr(checkboxs[i]); <BR>        체크박스[i].checked = true; <BR>        } <BR>    } <BR>} <BR><br>function copyTr(obj) { <br>    var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0];  <BR>    var Str = obj.parentNode.parentNode; <BR>    var tr =  Str.cloneNode(true); <BR>    tbody.appendChild(tr); <BR>} <BR><br>//删除所选 <br>function delSelect(){ <BR>    var checkboxs = document.getElementsByName("checkbox"); <BR>    var table = document.getElementById("tbData"); <BR>    var tr = table.getElementsByTagName("tr"); <BR>    for (var i=0; i<checkboxs.length; i ) { <BR>        if(tr.length==2){ <BR>        checkboxs[i].checked = false; <BR>        반품; <BR>        } <BR>        if(checkboxs[i].checked==true){ <BR>        removeTr(checkboxs[i]); <BR>        i=-1; <BR>        } <BR>    } <BR>} <BR><br>function removeTr(obj) { <br>    var sTr = obj.parentNode.parentNode; <BR>    sTr.parentNode.removeChild(sTr); <BR>} <BR><br>//전체选按钮 <br>function selectAll() { <BR>    var checkboxs = document.getElementsByName("checkbox"); <BR>    var mark = true; <BR>    for (var i=0; i<checkboxs.length; i ) { <BR>        if (checkboxs[i].checked==false){mark = false} <BR>    }<BR> if (mark){ <BR> for (var i=0; i<checkboxs.length; i ) { <BR> checkboxs[i].checked = false <BR> } <BR> }else{ <BR> for (var i=0; i<checkboxs.length; i ) { <BR> checkboxs[i].checked = true <BR> } <BR> } <BR>} <br><br>// //////////////////////////////////////////페이지 작업 처리 중//// /// /////////////////////////////// <br><br>//////// ///// ////////////////////////////////키보드 조작 처리////////// //////// ////////////////////// <BR>//키보드 이벤트<BR>function startListen(){ <BR> if (document.addEventListener){ <BR> document.addEventListener("keydown",keyDown,true) <BR> }else{ <BR> document.attachEvent("onkeydown",keyDown) <BR> } <BR>} <BR>function stopListen(){ <BR> document.detachEvent("onkeydown",keyDown) <BR>} <br><br>//키보드 이벤트 처리 <BR>function keyDown(event){ <BR> if (event.keyCode==13){ addTr()} <BR> if(event.keyCode==46){delTr()} <BR>} <br><br>//테이블 추가<BR>function addTr( ) { <BR> var tbody = document .getElementById("tbData").getElementsByTagName("tbody")[0]; <BR> var sTr = tbody.getElementsByTagName("tr")[0] <BR> var tr = sTr.cloneNode(true); <BR> tbody.appendChild(tr); <BR>} <br><br>//테이블 추가<BR>function addTr() { <BR> var tbody = document.getElementById( "tbData").getElementsByTagName("tbody ")[0]; <BR> var trs = tbody.getElementsByTagName("tr") <BR> var sTr = trs[trs.length-1]; = sTr.cloneNode(true); <BR> tbody.appendChild(tr); <BR>} <BR><br>//테이블 삭제<br>function delTr() { <BR> var table = document.getElementById( "tbData"); <BR> var tr = table.getElementsByTagName("tr"); <BR> if(tr.length==2){return;} <BR> var lastTr = tr[tr.length-1] ; <BR> lastTr.parentNode.removeChild(lastTr) <BR>} <BR><br><br>//////////////////// ////////// /////////키보드 조작 처리//////////////////////////// ///////////// / <BR><br>///////////////////////////// ///////////////버튼 이벤트 처리 /////////////////////////////// /////// <br>//자동 채우기<BR>var currentObj; <BR>function showDiv(event,obj) { <BR> var eX = event.clientX <BR> var eY = event.clientY ; <BR> var sY = document.body.parentNode.scrollTop; <BR> var dY = eY sY; <BR> var divShowInput = document.getElementById("divShowInput") = dY " px"; <BR> divShowInput.style.left = eX "p x" ; <BR> divShowInput.style.display = "block"; <BR> currentObj = obj; <BR> ////스마트 메뉴//// <BR> fixMenu(); <BR> //포커스 위치 결정<BR> var tds = obj.parentNode.parentNode.getElementsByTagName("td") <BR> var tdOrder; ; i < tds.length; i ){ <BR> if(tds [i] === obj.parentNode){ <BR> tdOrder = i <BR> } <BR> }<BR>    //填充标题标题 <BR>    var tdTitleTr = document.getElementById("tbData").getElementsByTagName("tr")[0]; <BR>    var tdTitle = tdTitleTr.getElementsByTagName("td")[tdOrder]; <BR>    document.getElementById("barTitle").innerHTML = tdTitle.innerHTML; <BR>    //收集表格信息//判断중대 <BR>    var trs = obj.parentNode.parentNode.parentNode.getElementsByTagName("tr"); <BR>    var autoFillP = document.getElementById("autoFillP"); <BR>    var bankM = true; <BR>    for (var i = 0; i <  trs.length; i  ){ <BR>        var inputValue = trs[i].getElementsByTagName("td")[tdOrder].getElementsByTagName("input")[0] .값; <BR>        if (inputValue != "") { <BR>            bankM = false; <BR>            var menus = autoFillP.getElementsByTagName("a"); <BR>            if(menus.length > 0) { <BR>            var beliveM = true; <BR>              for (var j = 0; j <menus.length; j  ){ <BR>                 if(menus[j].firstChild.nodeValue == inputValue) {         beliveM = false; <BR>                   } <BR>               } <BR>              if(beliveM){ <BR>                 var Svalue = document.createElement("a" ); <BR>                   Svalue.setAttribute("href","javascript:void 0"); <BR>                   Svalue.onclick = function () {fillInput(this)}; <BR>                   var Stext = document.createTextNode(inputValue); <BR>                   Svalue.appendChild(Stext); <BR>                   autoFillP.appendChild(Svalue); <BR>               } <BR>            }else{ <BR>               var Svalue = document.createElement("a"); <BR>                Svalue.setAttribute("href","javascript:void 0"); <BR>                Svalue.onclick = function () {fillInput(this)}; <BR>                var Stext = document.createTextNode(inputValue); <BR>                Svalue.appendChild(Stext); <BR>                autoFillP.appendChild(Svalue); <BR>            } <BR>        } <BR>    }<BR>    if(bankM) { <BR>        var Svalue = document.createElement("a"); <BR>        Svalue.setAttribute("href","javascript:void 0"); <BR>        var Stext = document.createTextNode("数据空"); <BR>        Svalue.appendChild(Stext); <BR>        autoFillP.appendChild(Svalue); <BR>    } <BR>} <br><br>function fillInput(obj) { <BR>    currentObj.value = obj.innerHTML; <BR>    var divShowInput = document.getElementById("divShowInput"); <BR>    divShowInput.style.display = "없음"; <BR>} <br><br>function clearInput() { <BR>    currentObj.value = ""; <BR>    var divShowInput = document.getElementById("divShowInput"); <BR>    divShowInput.style.display = "없음"; <BR>} <br><br>function hideDiv(obj) { <BR>    obj.parentNode.style.display = "없음"; <BR>} <br><br>//删除智能菜单已有数据 <BR>function fixMenu() { <BR>    var autoFillP = document.getElementById("autoFillP"); <BR>    var 값 = autoFillP.getElementsByTagName("a"); <BR>    for (var i = values.length-1; i >= 0; i-- ){ <BR>        autoFillP.removeChild(values[i]);     <BR>    } <BR>} <BR>////////////////////////////////////// ///사업관리사례/////////////////////////////////////////////// <br><br>///////////////////////////////////////////// //////////////////////////////// <br><br>////////// ///////////////////////////////数据发送///////////////// ////////////////////// <BR>function sendData() { <BR>    var sendName = new Array("ok","A1","A2 ","A3","A4","A5","A6","A7","A8","A9","A10","A11"); <BR>    var trs = document.getElementById("tbData").getElementsByTagName("tbody")[0].getElementsByTagName("tr"); <BR>    for (var i = 0; i < trs.length; i ) { <BR>        var sendValue = new Array(); <BR>        var 값 = trs[i].getElementsByTagName("input"); <BR>        var postString = sendName[1]   "="   values[1].value;; <BR>        for (var j = 2; j < values.length; j ) { <BR>            postString = postString   "&"   sendName[j]   "="   values[j].value; <BR>        } <BR>        var SendAjax = new Ajax("isave.asp",0,postString,sendok); <BR>        SendAjax.post(); <BR>        기능 sendok(revData){ <BR>            alert(revData); <BR>        } <BR>    } <BR>} <br><br><br><br>////////////////////////// ////////////////数据发送/////////////////////////////// /////// <br><br><BR>//--> <BR></script>

    

    

    清空
    

    

    Llinzzi
    Huanhuan
    Tom.com
    超级长的长长长长长长
    

  
    
  
  
    
  
  
    
  
테이블>

      
        
        
        
      
    

复制所选

删除所选

    
      
        
        
        
        
        
        
        
        
        
        
        
        
      
      
      
      
        
        
        
        
        
        
        
        
        
        
        
        
      
      
    

全选	A1	A2	A3	A4	A5	A6	A7	A8	A9	A10	A11

      
        > ;
        
        
        
      
    

复system所选

删除所选

提交