DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js簡單的表格添加行和刪除行操作示例
js簡單的表格添加行和刪除行操作示例
編輯:JavaScript綜合知識     

 這篇文章主要介紹了js簡單的表格添加行和刪除行操作,需要的朋友可以參考下

 代碼如下: <html>  <head>  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  <script>  //創建一個html元素  function $c(tagname){  return document.createElement(tagname);  }  //文檔加載完成後要執行的內容  $(document).ready(function(){  //綁定添加行按鈕的單擊事件  $("#addrow").bind("click",function(){  // 取得table  var tab = $("#tab");  // 創建tr元素  var tr = $c("tr");  // 為table追加tr元素  tab.append(tr);  // 創建td元素  var td1=$c("td");  // td元素的內容  td1.innerHTML="insert1";  // 為新追加的tr追加td元素  tr.appendChild(td1);  var td2=$c("td");  td2.innerHTML="insert2";  tr.appendChild(td2);  });  // 綁定刪除行按鈕的單擊事件  $("#deleterow").bind("click",function(){  // 取得table的第一行  var tab = $("#tab tr:eq(0)");  // 刪除此行  tab.remove();  });  });  </script>  </head>  <body>  <table border='1' id="tab">  <tr>  <td>123</td>  <td>456</td>  </tr>  </table>  </br>  <button id="addrow">添加行</button>  <button id="deleterow">刪除行</button>  </body>  </html>   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved