21xrx.com
2024-11-08 23:20:32 Friday
登录
文章检索 我的文章 写文章
JavaScript实现动态表格
2023-06-15 07:43:12 深夜i     --     --
JavaScript 表格 动态化

在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 = "新性别";


});

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

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复