春風(fēng)博客
          

          

          春天里，百花香...
          

			
          
				
					

          導(dǎo)航
          

					
          
	
          
		
          <2008年4月>
          
	
          日一二三四五六
          303112345
          6789101112
          13141516171819
          20212223242526
          27282930123
          45678910
          

          

					

          統(tǒng)計(jì)
          
	
					

          公告
          
	MAIL: junglesong@gmail.com
          
MSN: junglesong_5@hotmail.com
          

          
Locations of visitors to this page 

					

          常用鏈接
          


          留言簿(11)
          


		
          隨筆分類(224)
          
		
				
			
	
		
          隨筆檔案(126)
          
		
				
			
	
		
          個(gè)人軟件下載
          
		
				
			
	
		
          我的其它博客
          
		
				
			
	
		
          我的鄰居們
          
		
				
			
	


          最新隨筆
          




          搜索
          



          積分與排名
          



          最新評(píng)論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評(píng)論排行榜
          


				
			
          
			
          
				
					
	
          
		
          
			使用DOM操作表格
		
          
		創(chuàng)建表格 
          

          <%@ page contentType="text/html; charset=UTF-8"%>
          

          
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          
          <html>
          
          <head>
          
          <title>Dom操作-創(chuàng)建表格</title>
          
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          
          <link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
          
    type          ="text/css" />
          
          </head>
          

          
          <body>
          
              <div id="bodyDiv">
          
                  <div id="header">
          
                      <jsp:include page="/web/page/branch/header.jsp"/>
          
                  </div>
          
                  <div id="sidebar">
          
                      <jsp:include page="/web/page/branch/sidebar.jsp"/>
          
                  </div>
          
                  <div id="content">
          
                      <p><input type="button" 
          
            value          ="創(chuàng)建表格" onclick="createTable()"/></p>
          
                  </div>
          
                  <div id="footer">
          
                      <jsp:include page="/web/page/branch/footer.jsp"/>
          
                  </div>
          
              </div>
          
          </body>
          
          </html>
          

          
          <script LANGUAGE="JavaScript">
          
          <!--
          

          
          function createTable(){    
          
              // 創(chuàng)建表格節(jié)點(diǎn)
          
              var tableNode=document.createElement("table");
          
    
          
              // 設(shè)置表格屬性
          
              tableNode.setAttribute("border","1");
          
    tableNode.setAttribute(          "width","100%");
          

          
              for(var i=0;i<10;i++){
          
                  // 創(chuàng)建table的一行，等于一個(gè)tr
          
                  var trNode=tableNode.insertRow(i);
          

          
        
          
                  for(var j=0;j<10;j++){
          
                      // 創(chuàng)建一行中的一個(gè)單元格，等于一個(gè)TD
          
                      var tdNode=trNode.insertCell(j);            
          
            
          
                      // 創(chuàng)建TD中的文本
          
                      var text=document.createTextNode(i*j);
          
                      // 將文本添加到TD中
          
                      tdNode.appendChild(text);
          
        }
          
    }
          
    
          
              // 使用document.getElementById取得id為content的單個(gè)節(jié)點(diǎn)
          
              var contentDiv=document.getElementById("content");
          
    
          
              // 將表格添加到contentDiv中
          
              contentDiv.appendChild(tableNode);
          
}
          

          
          //-->
          
          </script>
          

          

          

          

          
通過修改InnerHTML創(chuàng)建表格 
          

          <%@ page contentType="text/html; charset=UTF-8"%>
          

          
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          
          <html>
          
          <head>
          
          <title>Dom操作-創(chuàng)建表格2</title>
          
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          
          <link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
          
    type          ="text/css" />
          
          </head>
          

          
          <body>
          
              <div id="bodyDiv">
          
                  <div id="header">
          
                      <jsp:include page="/web/page/branch/header.jsp"/>
          
                  </div>
          
                  <div id="sidebar">
          
                      <jsp:include page="/web/page/branch/sidebar.jsp"/>
          
                  </div>
          
                  <div id="content">
          
                      <p><input type="button" 
          
            value          ="創(chuàng)建表格2" onclick="createTable()"/></p>
          
                  </div>
          
                  <div id="footer">
          
                      <jsp:include page="/web/page/branch/footer.jsp"/>
          
                  </div>
          
              </div>
          
          </body>
          
          </html>
          

          
          <script LANGUAGE="JavaScript">
          
          <!--
          

          
          function createTable(){    
          
              // 創(chuàng)建表格的文本
          
              var tableHTML="<table border=1>";
          

          
              for(var i=0;i<10;i++){
          
        tableHTML          +="<tr>";
          
        
          
                  for(var j=0;j<10;j++){
          
            tableHTML          +="<td>";            
          
            tableHTML          +=(i*j);
          
            tableHTML          +="</td>";        
          
        }
          
        
          
        tableHTML          +="</tr>";
          
    }
          
    
          
    tableHTML          +="</table>";
          
    
          
              // 使用document.getElementById取得id為content的單個(gè)節(jié)點(diǎn)
          
              var contentDiv=document.getElementById("content");
          
    
          
              // 將表格添加到contentDiv中
          
              contentDiv.innerHTML=tableHTML;
          
}
          

          
          //-->
          
          </script>
          

          

          

          

          
添加表格行 
          

          <%@ page contentType="text/html; charset=UTF-8"%>
          

          
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          
          <html>
          
          <head>
          
          <title>Dom操作-添加表格行</title>
          
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          
          <link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
          
    type          ="text/css" />
          
          </head>
          

          
          <body>
          
              <div id="bodyDiv">
          
                  <div id="header">
          
                      <jsp:include page="/web/page/branch/header.jsp"/>
          
                  </div>
          
                  <div id="sidebar">
          
                      <jsp:include page="/web/page/branch/sidebar.jsp"/>
          
                  </div>
          
                  <div id="content">
          
                      <table id="tableNode" border=1>
          
                          <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
          
                          <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
          
                          <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
          
                          <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
          
                      </table>
          
                      <p><input type="button" 
          
            value          ="添加表格行" onclick="addTableRow()"/></p>
          
                  </div>
          
                  <div id="footer">
          
                      <jsp:include page="/web/page/branch/footer.jsp"/>
          
                  </div>
          
              </div>
          
          </body>
          
          </html>
          

          
          <script LANGUAGE="JavaScript">
          
          <!--
          

          
          function addTableRow(){    
          
              // 按ID找到表格節(jié)點(diǎn)
          
              var tableNode=document.getElementById("tableNode");    
          
    
          
              // 創(chuàng)建table的一行，等于一個(gè)tr
          
              var trNode=tableNode.insertRow(0);
          
    
          
              for(var j=0;j<4;j++){
          
                  // 創(chuàng)建一行中的一個(gè)單元格，等于一個(gè)TD
          
                  var tdNode=trNode.insertCell(j);            
          
        
          
                  // 創(chuàng)建TD中的文本
          
                  var text=document.createTextNode(j);
          
                  // 將文本添加到TD中
          
                  tdNode.appendChild(text);
          
    }
          
}
          

          
          //-->
          
          </script>
          

          

          

          

          
刪除表格行 
          

          <%@ page contentType="text/html; charset=UTF-8"%>
          

          
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          
          <html>
          
          <head>
          
          <title>Dom操作-刪除表格行</title>
          
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          
          <link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
          
    type          ="text/css" />
          
          </head>
          

          
          <body>
          
              <div id="bodyDiv">
          
                  <div id="header">
          
                      <jsp:include page="/web/page/branch/header.jsp"/>
          
                  </div>
          
                  <div id="sidebar">
          
                      <jsp:include page="/web/page/branch/sidebar.jsp"/>
          
                  </div>
          
                  <div id="content">
          
                      <table id="tableNode" border=1>
          
                          <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
          
                          <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
          
                          <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
          
                          <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
          
                      </table>
          
                      <p><input type="button" 
          
            value          ="刪除表格行" onclick="deleteTableRow()"/></p>
          
                  </div>
          
                  <div id="footer">
          
                      <jsp:include page="/web/page/branch/footer.jsp"/>
          
                  </div>
          
              </div>
          
          </body>
          
          </html>
          

          
          <script LANGUAGE="JavaScript">
          
          <!--
          

          
          function deleteTableRow(){    
          
              // 按ID找到表格節(jié)點(diǎn)
          
              var tableNode=document.getElementById("tableNode");
          
    
          
              // 如果行數(shù)大于零則刪除第一行，否則彈出對(duì)話框
          
              if(tableNode.rows.length>0){
          
                  // 刪除第一行
          
                  tableNode.deleteRow(0);
          
    }
          
              else{
          
        alert(          "表格行刪除完畢");
          
    }
          
}
          

          
          //-->
          
          </script>
          

          

          

          
刪除當(dāng)前表格行 
          

          <%@ page contentType="text/html; charset=UTF-8"%>
          

          
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          
          <html>
          
          <head>
          
          <title>Dom操作-刪除表格行2</title>
          
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          
          <link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
          
    type          ="text/css" />
          
          </head>
          

          
          <body>
          
              <div id="bodyDiv">
          
                  <div id="header">
          
                      <jsp:include page="/web/page/branch/header.jsp"/>
          
                  </div>
          
                  <div id="sidebar">
          
                      <jsp:include page="/web/page/branch/sidebar.jsp"/>
          
                  </div>
          
                  <div id="content">
          
                      <table  border=1>
          
                          <tbody id="tbodyNode">
          
                          <tr id="row1"><td>1</td><td>2</td><td>3</td><td><input type="button" 
          
            value          ="刪除" onclick="deleteRow('row1')"/></td></tr>
          
                          <tr id="row2"><td>5</td><td>6</td><td>7</td><td><input type="button" 
          
            value          ="刪除" onclick="deleteRow('row2')"/></td></tr>
          
                          <tr id="row3"><td>9</td><td>10</td><td>11</td><td><input type="button" 
          
            value          ="刪除" onclick="deleteRow('row3')"/></td></tr>
          
                          <tr id="row4"><td>13</td><td>14</td><td>15</td><td><input type="button" 
          
            value          ="刪除" onclick="deleteRow('row4')"/></td></tr>
          
                          <tr id="row5"><td>13</td><td>14</td><td>15</td><td><a href="javascript:deleteRow('row5')"/>刪除</a></td></tr>
          
                          <tr id="row6"><td>23</td><td>24</td><td>25</td><td><a href="javascript:deleteRow('row6')"/>刪除</a></td></tr>
          
                          <tr id="row7"><td>33</td><td>34</td><td>35</td><td><a href="javascript:deleteRow('row7')"/>刪除</a></td></tr>
          
                          </tbody>
          
                      </table>
          
                      <p></p>
          
                  </div>
          
                  <div id="footer">
          
                      <jsp:include page="/web/page/branch/footer.jsp"/>
          
                  </div>
          
              </div>
          
          </body>
          
          </html>
          

          
          <script LANGUAGE="JavaScript">
          
          <!--
          

          
          function deleteRow(id){    
          
              // 按ID找到表格節(jié)點(diǎn)
          
              var tbodyNode=document.getElementById("tbodyNode");
          
    
          
              var trNode=document.getElementById(id);
          
    
          
    tbodyNode.removeChild(trNode);
          
}
          

          
          //-->
          
          </script>
          

          

          

          

          
刪除選擇的表格行 
          

          <%@ page contentType="text/html; charset=UTF-8"%>
          

          
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          
          <html>
          
          <head>
          
          <title>Dom操作-刪除表格行3</title>
          
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          
          <link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
          
    type          ="text/css" />
          
          </head>
          

          
          <body>
          
              <div id="bodyDiv">
          
                  <div id="header">
          
                      <jsp:include page="/web/page/branch/header.jsp"/>
          
                  </div>
          
                  <div id="sidebar">
          
                      <jsp:include page="/web/page/branch/sidebar.jsp"/>
          
                  </div>
          
                  <div id="content">
          
                      <table border=1>
          
                          <tbody id="tbodyNode">
          
                              <tr id="row1"><td><input type="checkbox" name="chk" value="row1"/></td><td>2</td><td>3</td><td>4</td></tr>
          
                              <tr id="row2"><td><input type="checkbox" name="chk" value="row2"/></td><td>6</td><td>7</td><td>8</td></tr>
          
                              <tr id="row3"><td><input type="checkbox" name="chk" value="row3"/></td><td>10</td><td>11</td><td>12</td></tr>
          
                              <tr id="row4"><td><input type="checkbox" name="chk" value="row4"/></td><td>14</td><td>15</td><td>16</td></tr>
          
                          </tbody>
          
                      </table>
          
                      <p><input type="button" 
          
            value          ="刪除選擇的表格行" onclick="deleteSelectedTableRow()"/></p>
          
                  </div>
          
                  <div id="footer">
          
                      <jsp:include page="/web/page/branch/footer.jsp"/>
          
                  </div>
          
              </div>
          
          </body>
          
          </html>
          

          
          <script LANGUAGE="JavaScript">
          
          <!--
          

          
          function deleteSelectedTableRow(){    
          
              // 按ID找到tbodyNode
          
              var tbodyNode=document.getElementById("tbodyNode");
          

          
              // 使用document.getElementsByName取所有name為chk的節(jié)點(diǎn)
          
              var chkes=document.getElementsByName("chk");
          

          
              // 注意這里要逆向刪除行，正向刪除會(huì)導(dǎo)致后面的行下標(biāo)變化
          
              for(var i=chkes.length-1;i>-1;i--){
          
                  if(chkes[i].checked){
          
                      var trNode=document.getElementById(chkes[i].getAttribute("value"));
          
            tbodyNode.removeChild(trNode);
          
        }
          
    }
          
}
          

          
          //-->
          
          </script>
          

          

          

          

          
刪除表格列 
          

          <%@ page contentType="text/html; charset=UTF-8"%>
          

          
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          
          <html>
          
          <head>
          
          <title>Dom操作-刪除表格列</title>
          
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          
          <link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
          
    type          ="text/css" />
          
          </head>
          

          
          <body>
          
              <div id="bodyDiv">
          
                  <div id="header">
          
                      <jsp:include page="/web/page/branch/header.jsp"/>
          
                  </div>
          
                  <div id="sidebar">
          
                      <jsp:include page="/web/page/branch/sidebar.jsp"/>
          
                  </div>
          
                  <div id="content">
          
                      <table id="tableNode" border=1>
          
                          <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
          
                          <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
          
                          <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
          
                          <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
          
                      </table>
          
                      <p><input type="button" 
          
            value          ="刪除表格列" onclick="deleteTableCol()"/></p>
          
                  </div>
          
                  <div id="footer">
          
                      <jsp:include page="/web/page/branch/footer.jsp"/>
          
                  </div>
          
              </div>
          
          </body>
          
          </html>
          

          
          <script LANGUAGE="JavaScript">
          
          <!--
          

          
          function deleteTableCol(){    
          
              // 按ID找到表格節(jié)點(diǎn)
          
              var tableNode=document.getElementById("tableNode");
          
    
          
              // 如果列數(shù)大于零則刪除第一列，否則彈出對(duì)話框
          
              if(tableNode.cells.length>0){
          
    
          
                  for(var j=0;j<tableNode.rows.length;j++){
          
                      // 刪除每一行的第一個(gè)單元格從而刪除第一列
          
                      tableNode.rows[j].deleteCell(0);
          
        }        
          
    }
          
              else{
          
        alert(          "表格列刪除完畢");
          
    }
          
}
          

          
          //-->
          
          </script>
          

          

          

          

          
 
		
          
			posted on 2008-04-05 16:05 sitinspring 閱讀(1899) 評(píng)論(0)  編輯  收藏  所屬分類: Web開發(fā) 、JavaScript 
		
          
	
          







          
	    
    




          








          

				
			
          
			
sitinspring(http://www.aygfsteel.com)原創(chuàng),轉(zhuǎn)載請(qǐng)注明出處.
    







          
        
	




主站蜘蛛池模板：
绥江县|
龙游县|
沽源县|
阳东县|
凌源市|
宽甸|
永福县|
江陵县|
东城区|
营山县|
陈巴尔虎旗|
进贤县|
保康县|
佛学|
集贤县|
辽阳县|
石家庄市|
临安市|
神池县|
山西省|
开远市|
上蔡县|
肥城市|
九龙坡区|
高青县|
江源县|
吉隆县|
陕西省|
澄江县|
鹤壁市|
于田县|
永丰县|
花莲县|
连云港市|
曲靖市|
鄂托克旗|
伽师县|
浑源县|
泰宁县|
临颍县|
周口市|