js簡單的表格新增行和刪除行操作範例_javascript技巧

複製程式碼 程式碼如下:

<script> <BR>//建立一個html元素<BR>function $c(tagname ){ <BR>return document.createElement(tagname); <BR>} <BR>//文件載入完成後要執行的內容<BR>$(document).ready(function(){ <BR>//綁定定新增行按鈕的點選事件<BR>$("#addrow").bind("click",function(){ <BR>// 取得table <BR>var tab = $("#tab"); <BR>// 建立tr元素<BR>var tr = $c("tr"); <BR>// 為table追加tr元素<BR>tab.append(tr); <BR>// 建立td元素<BR>var td1=$c("td"); <BR>// td元素的內容<BR>td1.innerHTML="insert1"; <BR>// 為新追加的tr追加td元素<BR> tr.appendChild(td1); <BR>var td2=$c("td"); <BR>td2.innerHTML="insert2"; <BR>tr.appendChild(td2); <BR>}); <BR>tr.appendChild(td2); <BR>}); <BR>tr.appendChild(td2); <BR>}); <BR>tr.appendChild(td2); <BR>}); <BR>tr.appendChild(td2); <BR>}); <BR>// 綁定刪除行按鈕的點選事件<BR>$("#deleterow").bind("click",function(){ <BR>// 取得table的第一行<BR>var tab = $("#tab tr:eq(0)"); <BR>// 刪除此行<BR>tab.remove(); <BR>}); <BR>}); <BR></script>





456

123

新增行 刪除行