javascript中table怎么刪除行

javascript中table刪除行的實現方法：首先創建一個HTML示例文件；然后定義一個table表格；最后通過“function deleteRow(_this){…}”方法實現刪除行的功能即可。

本文操作環境：windows7系統、javascript1.8.5版，DELL G3電腦

javascript中table怎么刪除行？

JavaScript為table動態添加、刪除行

我一共寫了三種方法來實現添加行的功能，寫了一種方法來實現刪除行的功能，主要感覺是一定要熟悉JavaScript的API，其實這些東西API文檔里面都有，就看你是否知道JavaScript中有這個函數或屬性，然后把這些屬性和函數整合起來就是你想要的東西。

所有HTML元素都能用的常用函數：node.appendChild(node)、

所有HTML元素都能用的常用屬性：element.tagName

document對象的常用方法：document.createElement(name)

< table>中的常用函數：tableObject.insertRow(index)、tableObject.deleteRow(index)

< table>中的常用屬性：tableObject.rows、tableObject.rows.length

< tr >中的常用函數：tablerowObject.insertCell(index)

< tr>中的常用屬性：tablerowObject.rowIndex

<style type="text/css">     table{         border:1px solid #000;         border-collapse: collapse;     }     th,td{         border:1px solid #000;         padding:6px;     } </style> <script type="text/javascript">     function addRow1(){         var userInfo = document.getElementById("userInfo");         var row = document.createElement("tr");         var td1 = document.createElement("td");         td1.innerHTML = "李四";         var td2 = document.createElement("td");         td2.innerHTML = "102";         var td3 = document.createElement("td");         td3.innerHTML = "北海";         var td4 = document.createElement("td");         td4.innerHTML = "<a onclick='delete(this)'>刪除</a>";         row.appendChild(td1);         row.appendChild(td2);         row.appendChild(td3);         row.appendChild(td4);         userInfo.appendChild(row);                   }     function addRow2(){         var userInfo = document.getElementById("userInfo");         var rowLength = userInfo.rows.length;         //新行將被插入index所在行之前。若index等于表中的行數，則新行將被附加到表的末尾。         //返回一個TableRow，表示新插入的行。         var tableRow = userInfo.insertRow(rowLength);         tableRow.innerHTML = "<td>李四</td><td>102</td><td>四海</td><td><a onclick='deleteRow(this)'>刪除</a></td>";     }     function addRow3(){         var userInfo = document.getElementById("userInfo");         //計算rows.length時會把表頭包含在內         var rowLength = userInfo.rows.length;         var tableRow = userInfo.insertRow(rowLength);         //新單元格將被插入當前位于 index 指定位置的表元之前         //如果 index 等于行中的單元格數，則新單元格被附加在行的末尾。         var tableCell0 = tableRow.insertCell(0);         var tableCell1 = tableRow.insertCell(1);         var tableCell2 = tableRow.insertCell(2);         var tableCell3 = tableRow.insertCell(3);         tableCell0.innerHTML = "李四";         tableCell1.innerHTML = "103";         tableCell2.innerHTML = "黑海";         tableCell3.innerHTML = "<a onclick='deleteRow(this)'>刪除</a>";     }     //不能傳初始化時當前元素所在行的rowIndex，因為刪除操作之后當前元素所在行的rowIndex會發送變化     function deleteRow(_this){         var userInfo = document.getElementById("userInfo");         var rowIndex = getTrIndex(_this);         //deleteRow() 方法用于從表格刪除指定位置的行         //參數 index 指定了要刪除的行在表中的位置         userInfo.deleteRow(rowIndex);     }     function getTrIndex(element){         if(element.tagName.toLowerCase() == "tr"){             //rowIndex屬性返回某一行在表格的行集合中的位置（row index）             return element.rowIndex;         }else{             return getTrIndex(element.parentNode);         }     } </script>

推薦學習：《javascript高級教程》