隨筆 - 154 
文章 - 60 
trackbacks - 0


           
	

          

          
	
		
          
			
          
	
          
		
          <2007年11月>
          
	
          日一二三四五六
          28293031123
          45678910
          11121314151617
          18192021222324
          2526272829301
          2345678
          

          

          
			


          
	
          聲明：
          

          
          該blog是為了收集資料，認(rèn)識(shí)朋友，學(xué)習(xí)、提高技術(shù)，所以本blog的內(nèi)容除非聲明，否則一律為轉(zhuǎn)載！！
          

          
感謝那些公開(kāi)自己技術(shù)成果的高人們！！！
          
支持開(kāi)源，尊重他人的勞動(dòng)！！ 
      

          

			

          常用鏈接
          


          留言簿(3)
          




		
          隨筆分類(lèi)(148)
          
		
				
			
	
		
          隨筆檔案(143)
          
		
				
			
	
		
          收藏夾(2)
          
		
				
			
	
		
          其他
          
		
				
            
			
				
          
			
	
		
          學(xué)習(xí)（技術(shù)）
          
		
				
			
	
		
          觀(guān)察思考（非技術(shù)）
          
		
				
			
	




          搜索
          

            
	
          • 
		
          •  
	
            • 

          


          最新評(píng)論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評(píng)論排行榜
          


          		
	

          

          
	
					


          
	
	上邊是一個(gè)表，下邊是一些錄入控件text ,select
          
實(shí)現(xiàn)了：插入 ，刪除，修改，讀取，驗(yàn)證類(lèi)型唯一性(每種類(lèi)型只能輸入一個(gè)記錄)
          

          <!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(          "這個(gè)類(lèi)型的記錄已經(jīng)存在");
          
                          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>類(lèi)型</td>
          
                      <td>參數(shù)1</td>
          
                      <td>參數(shù)二</td>
          
                      <td>參數(shù)三</td>
          
                  </tr>
          
              </table>
          
              </div>
          
              <table>
          
                  <tr>
          
                      <td>
          
                          <select name="type" onchange="reset()">
          
                              <option value="typeA">類(lèi)型A</option>
          
                              <option value="typeB">類(lèi)型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" onclick="test()" value="test"/>--></td>
          
                  </tr>
          
              </table>
          
              <!--
          
<td><input type="button" onclick="test2()" value="test2"/></td>
          
<td><input type="button" onclick="alert(selectedRowIndex)" value="test2"/></td>
          
          -->
          
          </BODY>
          
          </HTML>
          

          

	
          posted on 2007-11-29 16:53 lk 閱讀(1090) 評(píng)論(0)  編輯  收藏  所屬分類(lèi): ajax&js 
          

          







          
	    
    




          








          

				
	



          



    







          
        
	




主站蜘蛛池模板：
井冈山市|
同心县|
故城县|
恩平市|
香港
|
正阳县|
信阳市|
安西县|
金寨县|
惠安县|
内黄县|
建德市|
榆树市|
合川市|
泸州市|
休宁县|
卢龙县|
甘南县|
黄陵县|
项城市|
甘孜|
武宁县|
新昌县|
托里县|
安丘市|
永年县|
安庆市|
察雅县|
顺昌县|
高雄市|
阳高县|
大余县|
新乡市|
新丰县|
宁明县|
涪陵区|
淮阳县|
沁水县|
葫芦岛市|
元氏县|
靖江市|