萬盛學電腦網 >> 腳本專題 >> javascript >> js簡單的表格添加行和刪除行操作示例
js簡單的表格添加行和刪除行操作示例
這篇文章主要介紹了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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved