在Web开发中，表格是不可或缺的一部分。而JavaScript可以让表格更加动态化和交互化。下面就来演示一下如何用JavaScript实现一个动态表格。

首先我们需要创建一个html文件，并引入JavaScript代码：

   
 
   
 
  
动态表格
  
    
      
        
        
        
      
    
    
      
        
        
        
      
      
        
        
        
      
    
  

 

  

   
姓名
   
年龄
   
性别
  
 
 

  

   
小明
   
20
   
男
  
  

   
小红
   
18
   
女
  
 

  添加一行
   
 

接下来，我们需要编写JavaScript代码来实现添加一行的功能。首先，我们需要获取到表格和按钮的DOM元素：

// 获取按钮和表格的DOM元素
var addBtn = document.getElementById("addBtn");
var myTable = document.getElementById("myTable");

接着，我们给按钮添加一个点击事件，当点击按钮时，就添加一行：

// 给按钮添加点击事件
addBtn.addEventListener("click", function() {
  // 创建一行
  var newRow = myTable.insertRow(-1);
  // 插入单元格
  var nameCell = newRow.insertCell(-1);
  var ageCell = newRow.insertCell(-1);
  var genderCell = newRow.insertCell(-1);
  // 填充单元格
  nameCell.innerHTML = "新姓名";
  ageCell.innerHTML = "新年龄";
  genderCell.innerHTML = "新性别";
});

到这里，我们已经实现了添加一行的功能。当我们点击按钮时，就可以动态地添加一行到表格中。

相似文章
• JSP和JavaScript：让Web应用动态化
  JSP和JavaScript：让Web应用动态化
  
  

友情链接
• 网站定制开发
• 帮你发
• 小蓄群站获客
• 雅圣洁家政