项目经验：用js实现行动态添加效果

来源：互联网发布：神户钢铁篡改数据事件编辑：程序博客网时间：2024/05/20 18:16
//数据延迟 添加动态行function addS(){     //将测站下拉框设置为不可编辑     var szczElement = $$( "yjtjxx.stcd");     if(flag=="add" && szczElement.disabled== false){            var inputElement = document.createElement( "input");           inputElement.setAttribute( "class", "w_260");           inputElement.setAttribute( "type", "hidden");           inputElement.setAttribute( "name", "yjtjxx.stcd");           inputElement.setAttribute( "id", "yjtjxx.stcd");           inputElement.setAttribute( "value",szczElement.value);           szczElement.parentNode.appendChild(inputElement);           szczElement.disabled = true;     }    //每次添加时先把最后一行的添加按钮删除，保留删除按钮     //先删除添加按钮     var addButtonElement = $$( "addbuttonS");     addButtonElement.parentNode.removeChild(addButtonElement);     //i是行数    var i = hangshuS[hangshuS.length -1]+1;    hangshuS[hangshuS.length]=i;     //创建tr元素     var trElemnet = document.createElement( "tr");     trElemnet.setAttribute( "value",i);     trElemnet.style.height = "25px";     //创建td元素     //td 选择或者     var td1Element = document.createElement( "td");     td1Element.setAttribute( "class", "short");     var select1Element = document.createElement( "select");     select1Element.setAttribute( "name", "yjtjxx.huoqieS"+i);     select1Element.setAttribute( "id", "yjtjxx.huoqieS"+i);     td1Element.appendChild(select1Element);     //td 选择项目分类     var td4Element = document.createElement( "td");     td4Element.setAttribute( "class", "long");     var select4Element = document.createElement( "select");     select4Element.setAttribute( "name", "yjtjxx.xmflS"+i);     select4Element.setAttribute( "id", "yjtjxx.xmflS"+i);     td4Element.appendChild(select4Element);     //td 监视项目     var td5Element = document.createElement( "td");     td5Element.setAttribute( "class", "middle1");     var select5Element = document.createElement( "select");     select5Element.setAttribute( "name", "yjtjxx.jcxmS"+i);     select5Element.setAttribute( "id", "yjtjxx.jcxmS"+i);     td5Element.appendChild(select5Element);     //td 数据上报间隔     var td6Element = document.createElement( "td");     td6Element.setAttribute( "class", "middle1");     var text1Element = document.createTextNode( "720分钟");     td6Element.appendChild(text1Element);     //td 延迟预警时间     var td7Element = document.createElement( "td");     td7Element.setAttribute( "class", "middle1");     var inputElement = document.createElement( "input");     inputElement.setAttribute( "type", "text");     inputElement.setAttribute( "class", "middle1");     inputElement.setAttribute( "name", "yjtjxx.ycyjsj"+i);     inputElement.setAttribute( "id", "yjtjxx.ycyjsj"+i);     var text2Element = document.createTextNode( "分钟");     td7Element.appendChild(inputElement);     td7Element.appendChild(text2Element);          var td8Element = document.createElement( "td");     td8Element.setAttribute( "class", "short");     //创建删除按钮     var delElement = document.createElement( "a");     var text3Element = document.createTextNode( "删除");     delElement.appendChild(text3Element);     delElement.setAttribute( "id", "delbuttonS"+i);     delElement.setAttribute( "class", "link");     //为按钮添加单击事件     delElement.onclick = function() {            //先把添加按钮删除            var addButtonElement = $$( "addbuttonS");          addButtonElement.parentNode.removeChild(addButtonElement);            //删除按钮所在的tr对象            var schs = trElemnet.getAttribute( "value");           Array.prototype.indexOf = function(val) {            for ( var i = 0; i < this.length; i++) {                if ( this[i] == val) return i;            }            return -1;        };        Array.prototype.remove = function(val) {            var index = this.indexOf(val);            if (index > -1) {                 this.splice(index, 1);            }        };           hangshuS.remove(schs);           trElemnet.parentNode.removeChild(trElemnet);            //再找到最后一行加上添加按钮            var lastTrIndex = hangshuS[hangshuS.length -1];            //创建添加按钮            var addElement = document.createElement( "a");            var text4Element = document.createTextNode( "添加");           addElement.appendChild(text4Element);           addElement.setAttribute( "id", "addbuttonS");           addElement.setAttribute( "class", "link");            //为按钮添加单击事件           addElement.onclick = function() {                 //删除按钮所在的tr对象                Array.prototype.indexOf = function(val) {                 for ( var i = 0; i < this.length; i++) {                     if ( this[i] == val) return i;                 }                 return -1;             };             Array.prototype.remove = function(val) {                 var index = this.indexOf(val);                 if (index > -1) {                      this.splice(index, 1);                 }             };             addS();            }            //找到最后一行的删除按钮,利用这个删除按钮找到父节点，从而增加添加按钮            var delbuttonElement = $$( "delbuttonS"+lastTrIndex);           delbuttonElement.parentNode.appendChild(addElement);                }          var spanElement = document.createElement( "span");     var textspanElement = document.createTextNode( " ");     spanElement.appendChild(textspanElement);     //创建添加按钮     var addElement = document.createElement( "a");     var text5Element = document.createTextNode( "添加");     addElement.appendChild(text5Element);     addElement.setAttribute( "id", "addbuttonS");     addElement.setAttribute( "class", "link");     //为按钮添加单击事件     addElement.onclick = function() {            //删除按钮所在的tr对象           Array.prototype.indexOf = function(val) {            for ( var i = 0; i < this.length; i++) {                if ( this[i] == val) return i;            }            return -1;        };        Array.prototype.remove = function(val) {            var index = this.indexOf(val);            if (index > -1) {                 this.splice(index, 1);            }        };        addS();                }     td8Element.appendChild(delElement);     td8Element.appendChild(spanElement);     td8Element.appendChild(addElement);     //将td元素添加到tr元素中     trElemnet.appendChild(td1Element);     trElemnet.appendChild(td4Element);     trElemnet.appendChild(td5Element);     trElemnet.appendChild(td6Element);     trElemnet.appendChild(td7Element);     trElemnet.appendChild(td8Element);     //将tr元素添加到tbody元素中     document.getElementById( "shujuyanchi").appendChild(trElemnet);     //-----------------生成所有下拉款内容----------------------------     //选择或且下拉框     var huoqie=<%=com.richway.commonbase.utils.BaseConstants.getSelectMapItemMapJson("huoqie") %>;     InitStaticDropDownList(huoqie, "yjtjxx.huoqieS"+i, "");     //选择项目分类下拉框     var xmfl=<%=com.richway.commonbase.utils.BaseConstants.getSelectMapItemMapJson( "xmfl") %>;     InitStaticDropDownList(xmfl, "yjtjxx.xmflS"+i, "");     //监视项目下拉框     var stcd = $$( "yjtjxx.stcd").value;     var xmflS = $$( "yjtjxx.xmflS"+i).value;     InitXmxxBySzczAndXmflDownListExtS(" <%=basePath %>"," yjtjxx.jcxmS","",stcd,xmflS,i);     //项目分类下拉框变化监听     select4Element.onchange = function() {           xmflChangeS( "", this.value,i);     }}
0 0