<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

< HTML >

< HEAD >

< TITLE >  New Document  </ TITLE >

< META  NAME ="Generator"  CONTENT ="EditPlus" >

< META  NAME ="Author"  CONTENT ="" >

< META  NAME ="Keywords"  CONTENT ="" >

< META  NAME ="Description"  CONTENT ="" >

</ HEAD >

< script >

     var  flg = false ;

     var  selectedColor  =   " #99CCCC " ;

     var  initColor  =   " #ffff99 " ;

     var  selectedRowIndex  =   "" ;

     var  editObj;

     function  add() {

         var  cell;

         var  textNode;

         //  add head

         var  type  =  document.getElementsByName( " type " )[ 0 ];

        head  =  type.options[type.selectedIndex].text;

         // check exist

         var  hiddenHeads  =  document.getElementsByName( " hiddenHead " );

         for (i = 0 ;i < hiddenHeads.length;i ++ ) {

             if (hiddenHeads[i].value  ==  type.value) {

                alert( " 这个类型的记录已经存在 " );

                 return  ;

            }

        }

         // add row

        tbl  =  document.getElementById( " paramTbl " );

        rowsLen  =  tbl.rows.length;

        row  =  tbl.insertRow(rowsLen);        

        

         // create head tag

        textNode  =  document.createTextNode(head);        

        cell  =  row.insertCell( 0 )

        cell.setAttribute( " hight " , " 22 " );

        cell.appendChild(textNode);        

        row.appendChild(cell);        

         // add param tag

         for (i = 1 ;i < 4 ;i ++ ) {            

            paramValue  =  document.getElementsByName( " param " + i)[ 0 ].value;

            textNode  =  document.createTextNode(paramValue);            

            cell  =  row.insertCell(i)

            cell.setAttribute( " hight " , " 22 " );

            cell.appendChild(textNode);

            row.appendChild(cell);             

        }

         // add head value

        hiddenHead  =  document.createElement( " <input type='hidden' name='hiddenHead' value=' " + type.value + " '/> " );        

        cell  =  row.insertCell( 4 )        

        cell.setAttribute( " hight " , " 22 " );

        cell.appendChild(hiddenHead);

        row.appendChild(cell);

         // add param value

         for (i = 5 ;i < 8 ;i ++ ) {

            paramValue  =  document.getElementsByName( " param " + (i - 4 ))[ 0 ].value;

            hidden  =  document.createElement( " <input type='hidden' name='hiddenParam " + (i - 4 ) + " ' value=' " + paramValue + " '/> " );

            cell  =  row.insertCell(i)

            cell.style.display = 'none';

            cell.appendChild(hidden);

            row.appendChild(cell);   

        }

        row.onclick = function () {rowClick( this );} ;

        row.bgColor  =  initColor;

        init();

    }

     function  edit() {

        tbl  =  document.getElementById( " paramTbl " );

         if (selectedRowIndex == "" ) {

            alert( " please select a row " );

             return  ;

        }

         for (i = 1 ;i < 4 ;i ++ ) {

            paramObj  =  document.getElementsByName( " param " + i)[ 0 ];

            hiddenObj  =  document.getElementsByName( " hiddenParam " + i)[selectedRowIndex - 1 ];

            hiddenObj.value  =  paramObj.value;

            editObj.cells[i].innerText = paramObj.value;

        }

        init();

    }

     function  del() {

        tbl  =  document.getElementById( " paramTbl " );

        tbl.deleteRow(selectedRowIndex);

        selectedRowIndex  =   "" ;

        init();

    }

     function  rowClick(obj) {

        tbl  =  document.getElementById( " paramTbl " );

         if (selectedRowIndex  !=   "" ) {

            tbl.rows[selectedRowIndex].bgColor  =  initColor;

        }

        selectedRowIndex  =  obj.rowIndex;

        obj.bgColor  =  selectedColor;

         // reset select 

         var  type  =  document.getElementsByName( " type " )[ 0 ];

         var  hiddenHead  =  document.getElementsByName( " hiddenHead " )[selectedRowIndex - 1 ];        

         var  opts  =  type.options;

         if (flg) {

        alert(selectedRowIndex - 1 );

        alert(hiddenHead);

        alert(hiddenHead.value);

        }

         for (i = 0 ;i < opts.length;i ++ ) {    

             if (opts[i].value  ==  hiddenHead.value ) {

                opts[i].selected  =   true ;

            }

        }

         // copy param value

         for (i = 1 ;i < 4 ;i ++ ) {

            paramObj  =  document.getElementsByName( " param " + i)[ 0 ];

            hiddenObj  =  document.getElementsByName( " hiddenParam " + i)[selectedRowIndex - 1 ];            

            paramObj.value  =  hiddenObj.value;

             // alert(hiddenObj.value);

        }

        editObj = obj;

    }

     function  init() {

         for (i = 1 ;i < 4 ;i ++ ) {            

            param  =  document.getElementsByName( " param " + i)[ 0 ];

            param.value = "" ;

        }

         var  type  =  document.getElementsByName( " type " )[ 0 ];

        type.options[ 0 ].selected = true ;

    }

     function  test() {

        

        hiddenObjs  =  document.getElementsByName( " hiddenParam1 " )

         for (i = 0 ;i < hiddenObjs.length;i ++ ) {

            alert(hiddenObjs[i].value);

        }

         var  hiddenHeads  =  document.getElementsByName( " hiddenHead " );    

         for (i = 0 ;i < hiddenHeads.length;i ++ ) {

            alert(hiddenHeads[i].value);

        }

    }

     function  test2() {

         if (flg) {

            flg = false ;

        } else {

            flg = true ;

        }

    }

     function  reset() {

        tbl  =  document.getElementById( " paramTbl " );

         if (selectedRowIndex != "" ) {

            tbl.rows[selectedRowIndex].bgColor  =  initColor;

            selectedRowIndex = "" ;

        }

         for (i = 1 ;i < 4 ;i ++ ) {            

            param  =  document.getElementsByName( " param " + i)[ 0 ];

            param.value = "" ;

        }

    }

</ script >

< BODY >

     < div  style ="height:132px; width:100%; overflow-x:auto; overflow-y:auto; background-color:#ffff99;"   >

     < table  id ="paramTbl"  width ="100%" >

         < tr >

             < td > 类型 </ td >

             < td > 参数1 </ td >

             < td > 参数二 </ td >

             < td > 参数三 </ td >

         </ tr >

     </ table >

     </ div >

     < table >

         < tr >

             < td >

                 < select  name ="type"  onchange ="reset()" >

                     < option  value ="typeA" > 类型A </ option >

                     < option  value ="typeB" > 类型B </ option >

                 </ select >

             </ td >

             < td >

                 < input  type ="text"  name ="param1" />

             </ td >

             < td >

                 < input  type ="text"  name ="param2" />

             </ td >

             < td >

                 < input  type ="text"  name ="param3" />

             </ td >

         </ tr >

         < tr >

             < td >< input  type ="button"  onclick ="add()"  value ="add" /></ td >

             < td >< input  type ="button"  onclick ="edit()"  value ="edit" /></ td >

             < td >< input  type ="button"  onclick ="del()"  value ="del" /></ td >

             < td > <!-- <input type="button" οnclick="test()" value="test"/> --> </ td >

         </ tr >

     </ table >

     <!--

<td><input type="button" οnclick="test2()" value="test2"/></td>

<td><input type="button" οnclick="alert(selectedRowIndex)" value="test2"/></td>

-->

</ BODY >

</ HTML >