DANCE WITH JAVA
          

          開發出高質量的系統
          

          


          
	
		

          常用鏈接
          

		

          統計
          
	
		

          積分與排名
          


		
		
          好友之家
          
		
				
			
	

		

          最新評論
	
          

          
	
			
		

          
		
	

          

          
	
					
	
          
		
          
			js中實現table的插入、修改、刪除
		
          
		進來工作慢慢遠離web、遠離js，看著自己這些年來學習過程中寫過的上百個的js demo，感覺還是把它們發上來吧。雖然它們不夠完善，但對于js初學者還是比較有用的。整理一下慢慢發上來，算是留念吧。
          

          
好了，第一從table開始吧
          
就是上邊是一個表，下邊是一些錄入控件text ,select
          
實現了：插入 ，刪除，修改，讀取，驗證類型唯一性(每種類型只能輸入一個記錄)
          
文中的內容直接存成html就能看到效果，所以我就不貼圖片了。
          

          <!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" 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-09-10 15:24 dreamstone 閱讀(10336) 評論(4)  編輯  收藏  所屬分類: 片段 、腳本語言javascript 
		
          
	
          
	
	


	


          
	    
    


          

          評論
          
	
	
			
          
				# re: js中實現table的插入、修改、刪除
					
						2008-10-25 00:39
					
				vvd
			
          
			
          
				不錯哦  回復  更多評論
				  
			
          
		
			
          
				# re: js中實現table的插入、修改、刪除
					
						2010-08-10 10:44
					
				ss
			
          
			
          
				ok  回復  更多評論
				  
			
          
		
			
          
				# re: js中實現table的插入、修改、刪除
					
						2011-09-07 18:30
					
				http://www.aygfsteel.com/Modules/CaptchaImage/JpegI
			
          
			
          
				http://www.aygfsteel.com/Modules/CaptchaImage/JpegImage.aspx?cacheid=20110907180946http://www.aygfsteel.com/Modules/CaptchaImage/JpegImage.aspx?cacheid=20110907180946  回復  更多評論
				  
			
          
		
			
          
				# re: js中實現table的插入、修改、刪除
					
						2011-09-07 18:30
					
				http://www.aygfsteel.com/Modules/CaptchaImage/JpegI
			
          
			
          
				http://www.aygfsteel.com/Modules/CaptchaImage/JpegImage.aspx?cacheid=20110907180949  回復  更多評論
				  
			
          
		

          




          








          

				

          




    







          
        
	




主站蜘蛛池模板：
达州市|
石景山区|
策勒县|
合肥市|
商水县|
安溪县|
南丹县|
梁山县|
岫岩|
宁河县|
平乐县|
磴口县|
茌平县|
湘潭市|
义马市|
百色市|
博爱县|
新乡市|
泰安市|
互助|
克拉玛依市|
盐津县|
德江县|
徐闻县|
长乐市|
乐都县|
威远县|
新乡县|
噶尔县|
蛟河市|
关岭|
安阳县|
娄底市|
游戏|
木兰县|
颍上县|
界首市|
南城县|
海伦市|
景德镇市|
芒康县|