js實作對table動態新增、刪除和更新的方法_javascript技巧

本文實例講述了js實作對table動態新增、刪除和更新的方法。分享給大家供大家參考。具體實作方法如下：

複製程式碼 程式碼如下:

 
 
 
 
 
 
身體 { 
   字體大小：13px； 
   行高：25px； 
} 
表 { 
    上邊框：1px 實心#333； 
    底部邊框：1px 實心#333； 
    寬度：300px； 
} 
TD { 
    右邊框：1px 實線#333； 
    底部邊框：1px 實心#333； 
} 
.title { 
    文字對齊：居中； 
    字體粗細：粗體； 
    背景：#ccc； 
} 
.center { 
    文字對齊：居中； 
} 
#displayInfo { 
    顏色: 紅色; 
} 
風格> 
 
   function addRow() { // 增加一行
       var tableObj = document.getElementById('myTable'); 
       var rowNums = tableObj.rows.length; 
       var newRow = tableObj.insertRow(rowNums); 
       var col1 = newRow.insertCell(0); 
       col1.innerHTML = "幸福從天而降"; 
       var col2 = newRow.insertCell(1); 
       col2.innerHTML = "$18.5"; 
       col2.align = "居中"; 
       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 = "標題"; 
   } 
腳本> 
頭> 
 
 
    
        
        
    
    
        
        
    
     
        
        
    
表> 

> 

> 

> 

 
正文> 

希望本文對大家介紹的javascript程式設計有幫助。

書名	價格
看得見風景的房間	$30.00
60個瞬間	$32.00