js动态添加表格行

js动态添加表格行

< html >
     < title ></ title >
     < head ></ head >
< body >
< form  id ="form1" >
         < script  language ="javascript"  type ="text/javascript" >
            var count=0 ;
            function additem(id)
            {
                var row,cell,str;
                row = document.getElementById(id).insertRow();
                if(row != null )
                {
                    cell = row.insertCell();
                    cell.align="center";
                    cell.innerHTML="<input style=\"text-align:center;\" type=\"text\" name=\"viewName"+count+"\" value= \"viewName"+count+"\"><span id=\"viewNameSpan"+count+"\" style=\"display:none;\"></span>";
                    cell = row.insertCell();
                    cell.align="center";
                    cell.innerHTML="<input style=\"text-align:center;\" type=\"text\" name=\"viewValue"+count+"\" value= \"viewValue"+count+"\"><span id=\"viewValueSpan"+count+"\" style=\"display:none;\"></span>";
                    cell = row.insertCell();
                    cell.align="center";
                    cell.innerHTML="<input style=\"text-align:center;\" type=\"text\" name=\"viewSx"+count+"\" value= \"viewSx"+count+"\"><span id=\"viewSxSpan"+count+"\" style=\"display:none;\"></span>";
                    cell = row.insertCell();
                    cell.align="center";
                    cell.innerHTML="<input name=\"save@"+count+"\" type=\"button\" value=\"保存\" onclick=\'saveitem(this);\'><input name=\"update@"+count+"\" type=\"button\" style=\"display:none\" value=\"修改\" onclick=\'updateitem(this);\'><input type=\"button\" value=\"删除\" onclick=\'deleteitem(this);\'>";
                    count++;
                }
            }

            function deleteitem(obj)
            {
                var curRow = obj.parentNode.parentNode;
                if(confirm('您确认要删除该行信息吗？')){
                    tb.deleteRow(curRow.rowIndex);
                }
            }

            function saveitem(obj)
            {
                var dx = obj.name.split('@')[1];
                var nam = document.getElementsByName("viewName"+dx)[0].value;
                var val = document.getElementsByName("viewValue"+dx)[0].value;
                var sx = document.getElementsByName("viewSx"+dx)[0].value;
                
                hidden("viewName"+dx);
                show("viewNameSpan"+dx);
                setTextSpan("viewNameSpan"+dx,nam);2010-7-8
                hidden("viewValue"+dx);
                show("viewValueSpan"+dx);
                setTextSpan("viewValueSpan"+dx,val);
                hidden("viewSx"+dx);
                show("viewSxSpan"+dx);
                setTextSpan("viewSxSpan"+dx,sx);
                hidden("viewSx"+dx);
                show("viewSxSpan"+dx);
                hidden(obj.name);
                show("update@"+dx);

                //将数据保存至数据库Ajax方式
                //saveToDBByAjax();
                //switchOption(dx,"updateitem(this)","修改");
                //alert("nam=" + nam + "  val=" + val + "  sx=" + sx);
            }

            function updateitem(obj)
            {
                var dx = obj.name.split('@')[1];
                var nam = document.getElementsByName("viewName"+dx)[0].value;
                var val = document.getElementsByName("viewValue"+dx)[0].value;
                var sx = document.getElementsByName("viewSx"+dx)[0].value;

                show("viewName"+dx);
                hidden("viewNameSpan"+dx);
                show("viewValue"+dx);
                hidden("viewValueSpan"+dx);
                show("viewSx"+dx);
                hidden("viewSxSpan"+dx);
                hidden(obj.name);
                show("save@"+dx);

                //switchOption(dx,"saveitem(this)","保存");
            }

            function hidden(id){
                var s = document.getElementById(id);
                if(s!=null)s.style.display="none";
            }

            function show(id){
                var s = document.getElementById(id);
                if(s!=null)s.style.display="";
            }

            function setTextSpan(id,value){
                var s = document.getElementById(id);
                if(s!=null)s.innerText=value;
            }

            function switchOption(id,option,optionName){
                var s = document.getElementById(id);
                if(s!=null){
                    s.onclick = "aa();";
                    s.value = optionName;
                }
                alert(s.onclick)
            }

            function eqs(inputid,spanid){
                var s1 = document.getElementById(inputid);
                var s2 = document.getElementById(spanid);
                if(s1!=null && s2!=null){
                    s2.innerText = s1.value;
                }
            }
        
            function getsub()
            {
                var nam="",val="",sx="";
                for (var i = 0 ;i<count;i++)
                {
                    nam += document.getElementsByName("viewName"+i)[0].value;
                    val += document.getElementsByName("viewValue"+i)[0].value;
                    sx += document.getElementsByName("viewSx"+i)[0].value;
                }
                document.getElementById("Hidden1").value=nam;
                return false;
            }
         </ script >
         < table  id ="tb"  border ="1"  align ="left"  style ="float:left;" >
             < tr >
                 < td  align ="center"  width ='155px' > 显示名称 </ td >
                 < td  align ="center"  width ='155px' > 显示值 </ td >
                 < td  align ="center"  width ='155px' > 显示顺序 </ td >
                 < td  align ="center" >< input  name ="button"  type ="button"  onclick ='additem("tb")'  value =" 添  加 " /></ td >
             </ tr >
         </ table >
         < div  align ="left" >
             < input  type ="submit"  name ="button"  onclick ="getsub()"  value =" 提  交 "   />
             < input  id ="Hidden1"  name ="Hidden1"  type ="hidden"  value =""   />
         </ div >
</ form >
</ body >
</ html >