JavaScript动态向表格添加数据

朴灿烈づ我的快乐病毒、 2022-07-11 11:23 341阅读 0赞

利用javascript ，动态向表格中添加数据

1. 首先先写出表格的表头和主干部分

<table width="600" border="1" cellspacing="0">
        <thead>
           <tr>
              <th>编号</th>
              <th>姓名</th>
              <th>职位</th>
              <th>操作</th>
           </tr> 
        </thead>
        <tbody id="tbMain"></tbody>
     </table>

2. 接下来就是网表格里面添加数据，这里用的是原生javascript

<script type="text/javascript">
      
      //模拟一段JSON数据，实际要从数据库中读取
      var per = [
      			{id:001,name:'张珊',job:'学生'},
    			{id:002,name:'李斯',job:'教师'},
    			{id:003,name:'王武',job:'经理'}
    			]; 
      
      window.onload = function(){
    	  var tbody = document.getElementById('tbMain');
    	  
    	  for(var i = 0;i < per.length; i++){ //遍历一下json数据
    		  var trow = getDataRow(per[i]); //定义一个方法,返回tr数据
    	  	  tbody.appendChild(trow);
    		}
    	  
    	  }
    	  
      function getDataRow(h){
    	 var row = document.createElement('tr'); //创建行
    	 
    	 var idCell = document.createElement('td'); //创建第一列id
    	 idCell.innerHTML = h.id; //填充数据
    	 row.appendChild(idCell); //加入行  ，下面类似
    	 
    	 var nameCell = document.createElement('td');//创建第二列name
    	 nameCell.innerHTML = h.name;
    	 row.appendChild(nameCell);
    	 
    	 var jobCell = document.createElement('td');//创建第三列job
    	 jobCell.innerHTML = h.job;
    	 row.appendChild(jobCell);
    	 
    	 //到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮
    	 
    	 var delCell = document.createElement('td');//创建第四列，操作列
    	 row.appendChild(delCell);
    	 var btnDel = document.createElement('input'); //创建一个input控件
    	 btnDel.setAttribute('type','button'); //type="button"
    	 btnDel.setAttribute('value','删除'); 
    	 
    	 //删除操作
    	 btnDel.οnclick=function(){
    		 if(confirm("确定删除这一行嘛？")){
    			 //找到按钮所在行的节点，然后删掉这一行
    			 this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
    			 //btnDel - td - tr - tbody - 删除(tr)
    			 //刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除
    			 }
    		 }
    	 delCell.appendChild(btnDel);  //把删除按钮加入td，别忘了
    	 
    	 return row; //返回tr数据	 
    	 }	  
    </script>

3. 网页测试

![SouthEast][]

显示成功，点击删除按钮，并确定即可删除这一行

删除第二行，可以！

![SouthEast 1][]

[SouthEast]: /images/20220711/39f9495982c240f2bc5e62180a86aec6.png
[SouthEast 1]: /images/20220711/0b33ea6e7afe40a69811f25eb3d3483d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 动态表格操作

阅读目录 JavaScript 动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法 1.

痛定思痛。/ 2023年10月06日 22:23/ 0 赞/ 3 阅读

相关 jQuery 动态添加表格

阅读目录预览源码预览 ![在这里插入图片描述][1e903e3fce484c4393bbcb3ceebf34e2.gif_pic_center]

本是古典何须时尚/ 2023年10月06日 22:14/ 0 赞/ 39 阅读

相关 javascript--动态添加表格（三种方法）

题目：用户输入行和列，动态创建表格：方法一：createElement()，创建标签（缺点：每创建表格在原来的基础上新建表格） <!DOCTYPE

向右看齐/ 2022年08月23日 04:57/ 0 赞/ 228 阅读

相关 JavaScript动态增删改表格数据

1. <!DOCTYPE html> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <h

朴灿烈づ我的快乐病毒、/ 2022年08月05日 02:23/ 0 赞/ 170 阅读

相关 JavaScript动态添加/删除表格行

> 跟着廖雪峰的 [JS教程][JS] 初步学习了一下JavaScript，看到 DOM操作部分的时候，想着找个小例子实践，恰好项目页面对表格的操作较多，需要解决简单的 ta

刺骨的言语ヽ痛彻心扉/ 2022年07月13日 00:25/ 0 赞/ 386 阅读

相关 JavaScript动态向表格添加数据

利用javascript ，动态向表格中添加数据 1. 首先先写出表格的表头和主干部分 <table width="600" border="1" cellspa

朴灿烈づ我的快乐病毒、/ 2022年07月11日 11:23/ 0 赞/ 342 阅读

相关 scala之向Excel里面动态添加数据

def createFirst(fullName: String, provinceLists: List\[String\], detailLists: List\[List

待我称王封你为后i/ 2022年06月09日 02:52/ 0 赞/ 279 阅读

相关运用jQuery动态向html中添加表格元素

实现的功能是运用jQuery动态的向一个table中添加行元素，很简单，也不废话，直接上代码。 <!DOCTYPE html> <html lang="en"

快来打我*/ 2022年06月02日 20:35/ 0 赞/ 199 阅读

相关 javascript 动态表格

function build_row(){ var table = document.getElementById("Table1");

短命女/ 2022年04月17日 06:13/ 0 赞/ 239 阅读

相关 JS动态向表格添加数据

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t

灰太狼/ 2022年04月15日 05:16/ 0 赞/ 490 阅读