網頁

BloggerAds 廣告

搜尋此網誌

2013年3月2日 星期六

網頁動態表格(dynamic table) 

 <html>  
 <head>  
 <script>  
 function insert()  
 {  
      var table=document.getElementById("myTable");  
      var text = document.createTextNode('test');  
      var row = table.insertRow();  
      var column1 = row.insertCell(0);  
      var column2 = row.insertCell(1);  
      column1.appendChild(text);  
      column2.innerText = "column2";  
 }  
 function del()  
 {  
      var table=document.getElementById("myTable");  
      table.deleteRow();  
 }  
 </script>  
 </head>  
 <body>  
 <table id="myTable" border="1">  
  <tr>  
   <td>1</td>  
   <td>book</td>  
  </tr>  
 </table>  
 <br>  
 <button type="button" onclick="insert()">Insert</button>  
 <button type="button" onclick="del()">Delete</button>  
 </body>  
 </html>
0 comments at 下午4:42
Labels:

網頁動態選單製作

利用css的display屬性, 達成動態隱藏或展示選單的效果 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <style>  
 #child {  
      display: none;  
 }  
 </style>  
 <script type="text/javascript">  
      function changeChildStatus() {  
           var childUl = document.getElementById('child');  
           if(childUl.style.display == 'block'){  
                childUl.style.display = 'none'  
           }else{  
                childUl.style.display = 'block'  
           }  
      }  
 </script>  
 </head>  
 <body>  
      <ul id="parent">  
           <li>child:  
                <ul id="child">  
                     <li>apple</li>  
                     <li>kiwi</li>  
                </ul>  
           </li>  
           <li>banana</li>  
           <li>tomato</li>  
      </ul>  
      <button type="button" onclick="changeChildStatus()">hide/show child</button>  
 </body>  
 </html>
0 comments at 上午10:40
Labels:
訂閱： 文章 (Atom)