春風博客
          

          

          春天里，百花香...
          

			
          
				
					

          導航
          

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

          

					

          統計
          
	
					

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

          
Locations of visitors to this page 

					

          常用鏈接
          


          留言簿(11)
          


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


          最新隨筆
          




          搜索
          



          積分與排名
          



          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


				
			
          
			
          
				
					
	
          
		
          
			使用DOM操作表格
		
          
		創建表格 
          

          <%@ 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">
          
                      <p><input type="button" 
          
            value          ="創建表格" onclick="createTable()"/></p>
          
                  </div>
          
                  <div id="footer">
          
                      <jsp:include page="/web/page/branch/footer.jsp"/>
          
                  </div>
          
              </div>
          
          </body>
          
          </html>
          

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

          
          function createTable(){    
          
              // 創建表格節點
          
              var tableNode=document.createElement("table");
          
    
          
              // 設置表格屬性
          
              tableNode.setAttribute("border","1");
          
    tableNode.setAttribute(          "width","100%");
          

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

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

          
          //-->
          
          </script>
          

          

          

          

          
通過修改InnerHTML創建表格 
          

          <%@ 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">
          
                      <p><input type="button" 
          
            value          ="創建表格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(){    
          
              // 創建表格的文本
          
              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的單個節點
          
              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找到表格節點
          
              var tableNode=document.getElementById("tableNode");    
          
    
          
              // 創建table的一行，等于一個tr
          
              var trNode=tableNode.insertRow(0);
          
    
          
              for(var j=0;j<4;j++){
          
                  // 創建一行中的一個單元格，等于一個TD
          
                  var tdNode=trNode.insertCell(j);            
          
        
          
                  // 創建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找到表格節點
          
              var tableNode=document.getElementById("tableNode");
          
    
          
              // 如果行數大于零則刪除第一行，否則彈出對話框
          
              if(tableNode.rows.length>0){
          
                  // 刪除第一行
          
                  tableNode.deleteRow(0);
          
    }
          
              else{
          
        alert(          "表格行刪除完畢");
          
    }
          
}
          

          
          //-->
          
          </script>
          

          

          

          
刪除當前表格行 
          

          <%@ 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找到表格節點
          
              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的節點
          
              var chkes=document.getElementsByName("chk");
          

          
              // 注意這里要逆向刪除行，正向刪除會導致后面的行下標變化
          
              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找到表格節點
          
              var tableNode=document.getElementById("tableNode");
          
    
          
              // 如果列數大于零則刪除第一列，否則彈出對話框
          
              if(tableNode.cells.length>0){
          
    
          
                  for(var j=0;j<tableNode.rows.length;j++){
          
                      // 刪除每一行的第一個單元格從而刪除第一列
          
                      tableNode.rows[j].deleteCell(0);
          
        }        
          
    }
          
              else{
          
        alert(          "表格列刪除完畢");
          
    }
          
}
          

          
          //-->
          
          </script>
          

          

          

          

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







          
	    
    




          








          

				
			
          
			
sitinspring(http://www.aygfsteel.com)原創,轉載請注明出處.
    







          
        
	




主站蜘蛛池模板：
宜都市|
镇江市|
阜新|
姜堰市|
日土县|
象州县|
深水埗区|
沂南县|
宜君县|
海城市|
怀宁县|
柯坪县|
彰化县|
通山县|
洛宁县|
凤台县|
天台县|
乌拉特前旗|
永顺县|
遂宁市|
鄂州市|
密云县|
民丰县|
松滋市|
中阳县|
内丘县|
彭山县|
晋中市|
凌云县|
翼城县|
拉孜县|
衡阳市|
扶余县|
利川市|
儋州市|
天祝|
宝坻区|
垦利县|
靖州|
工布江达县|
长丰县|