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

 

//数据延迟 添加动态行

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);

     }

}