JavaScript刪除table表格指定行
在實際應用中,可能要刪除指定表格的指定行,下面介紹一下如何實現此效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> function deleteRow(r){ var i=r.parentNode.parentNode.rowIndex; document.getElementById('myTable').deleteRow(i); } window.onload=function(){ var bts=document.getElementsByTagName("input"); for(var index=0;index<bts.length;index++){ bts[index].onclick=function(){ deleteRow(this); } } } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>螞蟻部落一</td> <td><input type="button" value="刪除行"/></td> </tr> <tr> <td>螞蟻部落二</td> <td><input type="button" value="刪除行"/></td> </tr> <tr> <td>螞蟻部落三</td> <td><input type="button" value="刪除行"/></td> </tr> </table> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).function deleteRow(r){},此函式能夠刪除指定的行,r引數是按鈕物件。
(2).var i=r.parentNode.parentNode.rowIndex,r.parentNode可以獲取td物件,r.parentNode.parentNode可以獲取tr物件,rowIndex獲取的是tr行的索引值。
(3).document.getElementById('myTable').deleteRow(i),刪除指定索引的行。
(4).var bts=document.getElementsByTagName("input"),獲取input元素集合,當然這裡就是按鈕物件集合。
(5).for(var index=0;index<bts.length;index++){
bts[index].onclick=function(){
deleteRow(this);
}
},批量為按鈕註冊事件處理函式。
二.相關閱讀:
(1).parentNode屬性參閱JavaScript parentNode一章節。
(2).rowIndex屬性參閱JavaScript rowIndex一章節。
(3).deleteRow()方法參閱JavaScript deleteRow()一章節。
相關文章
- JavaScript刪除table表格中行JavaScript
- JavaScript table表格行進行刪除和新增JavaScript
- jQuery table表格行的新增和刪除jQuery
- JavaScript | JavaScript刪除表格除標題行(第一行)的所有行JavaScript
- JavaScript獲取table表格指定列的值JavaScript
- 動態建立具有刪除行按鈕的table表格
- JavaScript 刪除陣列指定元素JavaScript陣列
- JavaScript刪除核取方塊選中的表格行JavaScript
- JavaScript 刪除字串中所有指定字元JavaScript字串字元
- JavaScript刪除字串中所有指定字元JavaScript字串字元
- JavaScript刪除字串中的指定字元JavaScript字串字元
- JavaScript動態為table表格新增行JavaScript
- JavaScript動態建立table表格JavaScript
- jQuery動態新增和刪除表格行jQuery
- JavaScript獲取table表格行與列的數量JavaScript
- 字串-刪除指定字元字串字元
- Git刪除指定分支Git
- Git刪除指定commitGitMIT
- 點選新增或者刪除表格行詳解
- Git刪除指定檔案Git
- jupyter notebook 刪除指定 kernel
- 陣列刪除指定項陣列
- JavaScript 刪除cookieJavaScriptCookie
- 刪除指定名稱的程式
- table表格tr行點選高亮
- JavaScript 獲取表格指定td單元格JavaScript
- 百度地圖javascript開發,刪除指定覆蓋物方法地圖JavaScript
- 得到txt空白行的行數、將txt檔案的空行刪除和刪除csv檔案中指定的行
- 如何批量刪除指定的GitHub ReposGithub
- git 刪除歷史指定檔案Git
- 刪除指定目錄下指定字尾的檔案
- JavaScript表格增刪改查詳解JavaScript
- 【Redis】 redis-cluster刪除指定的keyRedis
- jQuery刪除具有指定文字的li元素jQuery
- Array · 刪除陣列中指定的元素陣列
- pandas指定某一列刪除nanNaN
- JavaScript 刪除class屬性JavaScript
- JavaScript刪除陣列元素JavaScript陣列
- JavaScript 刪除重複字元JavaScript字元