JavaScript table表格行進行刪除和新增
table新增或者刪除tr行是常見操作,下面通過程式碼演示一下如何實現此功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top:1px solid #333; border-bottom:1px solid #333; width:300px; } td{ border-right:1px solid #333; border-bottom:1px solid #333; } .title{ text-align:center; font-weight:bold; background:#ccc; } .center{ text-align:center;} #displayInfo{color:red;} </style> <script type="text/javascript"> function addRow(){ var tableObj=document.getElementById('mytable'); var rowNums=tableObj.rows.length; var newRow=tableObj.insertRow(rowNums); var col1=newRow.insertCell(0); col1.innerHTML = "js教程"; var col2 = newRow.insertCell(1); col2.innerHTML = "$18.5"; col2.align = "center"; var divInfo = document.getElementById('displayInfo'); divInfo.innerHTML = "新增書籍成功"; } function delRow() { //刪除第二行 document.getElementById('mytable').deleteRow(1); var divInfo = document.getElementById('displayInfo'); divInfo.innerHTML = "刪除書籍成功"; } function updateRow() { //更新行的資訊 var uRow = document.getElementById('mytable').rows[0]; uRow.className = "title"; } window.onload=function(){ var add=document.getElementById("add"); var del=document.getElementById("del"); var modefiy=document.getElementById("modefiy"); add.onclick=function(){addRow();} del.onclick=function(){delRow();} modefiy.onclick=function(){updateRow();} } </script> </head> <body> <table border="0" cellpadding="0" cellspacing="0" id="mytable"> <tr id="row1"> <td>前端書籍</td> <td>價格</td> </tr> <tr id="row2"> <td>div教程</td> <td class="center">$30.00</td> </tr> <tr id="row3"> <td>css教程</td> <td class="center">$32.00</td> </tr> </table> <input name="b1" id="add" type="button" value="增加一行"/> <input name="b2" id="del" type="button" value="刪除第二行"/> <input name="b3" id="modefiy" type="button" value="修改標題"/> <div id="displayInfo"></div> </body> </html>
上面程式碼演示了相關操作,更多內容參閱相關閱讀。
相關閱讀:
(1).rows屬性參閱表格table rows一章節。
(2).insertRow()方法參閱js insertRow()一章節。
(3).insertCell()方法參閱js insertCell()一章節。
(4).className屬性參閱javascript className一章節。
相關文章
- jQuery table表格行的新增和刪除jQuery
- JavaScript刪除table表格指定行JavaScript
- jQuery動態新增和刪除表格行jQuery
- JavaScript刪除table表格中行JavaScript
- JavaScript刪除table表格列JavaScript
- JavaScript動態為table表格新增行JavaScript
- js操作 新增刪除table行,並進行重新整理JS
- 刪除table表格行和列程式碼例項
- javascript新增或者刪除table表格行程式碼例項JavaScript行程
- js如何刪除和新增table中的行和列JS
- JavaScript | JavaScript刪除表格除標題行(第一行)的所有行JavaScript
- JavaScript點選新增行或者刪除行JavaScript
- javascript動態刪除或者新增table表格行程式碼例項JavaScript行程
- 點選新增或者刪除表格行詳解
- 動態建立具有刪除行按鈕的table表格
- js動態新增和刪除table表格行程式碼例項JS行程
- jquery table 的新增和刪除jQuery
- jQuery實現的表格新增或者刪除行操作jQuery
- javascript動態刪除和新增表格行程式碼例項JavaScript行程
- javascript 動態新增表格行JavaScript
- 利用jquery給指定的table新增一行、刪除一行jQuery
- JavaScript刪除核取方塊選中的表格行JavaScript
- javascript實現的動態新增和刪除表格行程式碼JavaScript行程
- 點選刪除或者新增表格行簡單程式碼例項
- JavaScript 獲取table表格指定行和列的單元格內容JavaScript
- JavaScript新增和刪除select下拉項JavaScript
- JavaScript動態新增和刪除div元素JavaScript
- javascript如何動態新增和刪除元素JavaScript
- vue對table的某一行的資料進行編輯,刪除操作Vue
- JavaScript獲取table表格行與列的數量JavaScript
- 動態刪除和新增table行程式碼例項行程
- 使用JQuery刪除Table中的合併行jQuery
- C#對DataGridView進行新增、修改、刪除資料操作C#View
- JavaScript動態建立表格和增加表格的行JavaScript
- js動態建立table表格和刪除指定行列程式碼例項JS
- javascript新增刪除cookie程式碼JavaScriptCookie
- Excel表格新增編輯或刪除批註Excel
- oracle JOB 查詢 新增 修改 刪除 執行Oracle