js动态生成表格

千次阅读

2021-07-21 12:34:44

本案例实现的是利用JavaScript来动态创建表格，通过在js中添加学生信息入库（数组），动态更新html页面，同时也可以进行删除操作。

下面是本案例的全部代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <style>
        a {
            text-decoration: none;
        }
        
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        th {
            border: 1px solid black;
            background-color: lightblue;
        }
        
        td {
            border: 1px solid black;
            background-color: azure;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        /*创建学生信息数组*/
        var datas = [{
            name: '黄磊',
            subject: '数学',
            score: 100
        }, {
            name: '何炅',
            subject: '数学',
            score: 98
        }, {
            name: '彭彭',
            subject: '数学',
            score: 60
        }, {
            name: '妹妹',
            subject: '数学',
            score: 0
        }];

        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr); //创建行
            for (var k in datas[i]) {
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];
                tr.appendChild(td); //创建列
            }

            /*删除行*/
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:">删除</a>';
            tr.appendChild(td); //创建删除列

            var as = document.querySelectorAll('a');
            for (var j = 0; j < as.length; j++) {
                as[j].onclick = function() {
                    // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
                    tbody.removeChild(this.parentNode.parentNode)
                }
            }
        }
    </script>
</body>


</html>

本案例相关知识点：

1. appendchild：

appendChild() 方法向节点添加最后一个子节点。

提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。

您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。

2. for (var k in datas[i])：for...in...语句

js中使用for(var k in obj)来遍历对象：https://blog.csdn.net/weixin_45652765/article/details/106903434

需要注意的是

k访问的是属性名或者方法名，obj[k]访问的才是属性值。

html

更多相关内容

js自动生成表格
2017-09-22 16:38:18

jQuery表格生成插件Table.js。操作简单，资源中附带该类API，只需要使用几个简单的方法就可以生成一个漂亮的表格。

收起
js简单实现自动生成表格功能示例
2020-10-15 06:20:55

主要介绍了js简单实现自动生成表格功能,结合实例形式分析了JavaScript针对数组元素遍历与页面元素动态操作相关实现技巧,需要的朋友可以参考下

收起
基于JavaScript代码实现自动生成表格
2020-11-28 15:20:27

废话不多说，直接给大家贴js...//js实现输入表格行数、列数自动生成表格源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...

收起
用js实现的一个根据内容自动生成表格的函数
2020-12-01 15:53:02

晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序。要求是： 1，对于空内容，应该写为” ”,否则在ie会显示的很变态（ie当作该单元格不存在）。 2，当输出数据条数不等于表格的“长X宽”时，用”...

收起

原生js自动生成表格

千次阅读 2019-04-10 16:27:07

原生js自动生成表格 直接上代码，代码注释很清楚了。 <div id="demo"></div> <script> //原生js表格绑定 var hxj_table = { headers:{}, data:[], style:{ table:{ width:'auto...

原生js自动生成表格

直接上代码，代码注释很清楚了。

<div id="demo"></div>
<script>
	//原生js表格绑定
	var hxj_table = {
		headers:{},
		data:[],
		style:{
			table:{
				width:'auto',
				height:'auto',
				border:'1px solid #cdcdcd',
				fontWeight:'normal'
			},
			th:{
				fontSize:'20px',
				fontWeight:'bold',
				width:'auto',
				height:'auto',
			},
			td:{
				fontSize:'16px',
				fontWeight:'normal',
				textAlign:'center'
			}
		},
		//1.初始化表格数据
		init:function(headers,data,style){
				try{
						if(headers != null){
							this.headers = headers;
						}
						if(data != null){
							this.data = data;
						}
						if(style != null){
							this.style = style;
						}
					}catch(e){
						console.error(e);
					}
					console.log("init...");
			 	return this;
	  },
	  //2.显示数据
	  show:function(id){
	  	try{
	  		if(id == null){
	  			id = "demo";
	  			document.write("<div id='demo'><div>");
	  		}
	  		var table = "";
	  		table += "<table style='width:"+this.style.table.width+";height:"+this.style.table.height+";border:"+this.style.table.border+";font-weight:"+this.style.table.fontWeight+"'>";
	  		if(this.headers!=null){
	  			 table += "<tr>";
	  			 for(let header in this.headers){
	  			 	 table += "<th style='font-size:"+this.style.th.fontSize+";font-weight:"+this.style.th.fontWeight+";width:"+this.style.th.width+";height:"+this.style.th.height+"'>" + this.headers[header] + "</th>";
	  			 }
	  			 table += "</tr>";
	  		}
	  		if(this.data!=null){
	  			 
	  			 for(let tr in this.data){
	  			 	 table += "<tr>";
	  			 	 for(let td in this.data[tr]){
		  			 	 table += "<td style='font-size:"+this.style.td.fontSize+";font-weight:"+this.style.td.fontWeight+";text-align:"+this.style.td.textAlign+"'>" + this.data[tr][td] + "</td>";
	  			 
		  			 }
	  			 	 table += "</tr>";
	  			 }
	  			 
	  		}
	  		table += "</table>";
	  		document.getElementById(id).innerHTML = table;
	  		console.log("success!");
		  }catch(e){
		  	console.error(e);
		  }
	  }
	}	
	//初始化调用
	;(function(){
		let headers = {name:'姓名',age:'年龄',high:'身高',weight:'体重',school:'学校',birth:'生日'};
		let data = [{name:'john',age:18,high:'190cm',weight:'180',school:'交大',birth:'2001-01-01'},{name:'jack',age:18,high:'180cm',weight:'160',school:'交大',birth:'2001-01-01'}];
		let style;
		hxj_table.init(headers,data,style).show();
	})() 
</script>

代码效果：

收起

展开全文

JavaScript实现动态生成表格
2020-10-15 00:12:04

主要为大家详细介绍了JavaScript实现动态生成表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起
js实现自动生成表格功能的代码实例
2021-06-10 10:30:44

js实现自动生成表格功能的代码实例发布时间：2020-07-18 17:45:52来源：亿速云阅读：115作者：小猪这篇文章主要讲解了js实现自动生成表格功能的代码实例，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家...

js实现自动生成表格功能的代码实例

发布时间：2020-07-18 17:45:52

来源：亿速云

阅读：115

作者：小猪

这篇文章主要讲解了js实现自动生成表格功能的代码实例，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

本文实例讲述了js简单实现自动生成表格功能。分享给大家供大家参考，具体如下：

JS实现自动生成表格

由于自己的算法8太行，所以只能尽量用简单点的方法实现效果

下面直接上代码

姓名年龄身高

.del{

cursor: pointer;

color: blue;

}

var tableInfo = [

{ 姓名: '张三', 年龄: 20, 身高: 160 },

{ 姓名: '李四', 年龄: 18, 身高: 158 },

{ 姓名: '王二麻子', 年龄: 19, 身高: 180 },

{ 姓名: '孙悟空', 年龄: 100, 身高: 150 },

{ 姓名: '猪八戒', 年龄: 100, 身高: 155 },

{ 姓名: '龟龟', 年龄: 200, 身高: 0.5 }

]

var tr = document.createElement('tr');

var tdName = document.createElement('td');

var tdAge = document.createElement('td');

var tdTall = document.createElement('td');

var del = document.createElement('span');

//td赋值为对应的表格信息

tdName.innerHTML = tableInfo[i].姓名;

tdAge.innerHTML = tableInfo[i].年龄;

tdTall.innerHTML = tableInfo[i].身高;

//设置删除按钮

del.innerHTML = '删除';

del.className = 'del';

//调用创建函数

createAll(tdName, tdAge, tdTall);

}

//创建tr>td 和删除按钮

function createAll(tdName, tdAge, tdTall) {

table.appendChild(tr);

tr.appendChild(tdName);

tr.appendChild(tdAge);

tr.appendChild(tdTall);

tr.appendChild(del);

}

//设置删除按钮的点击事件

var btnDel = document.getElementsByClassName('del');

for (var i = 0; i < btnDel.length; i++) {

btnDel[i].onclick = function () {

//找到删除键的父节点(tr)并移除

this.parentNode.remove();

}

}

代码效果：

如果有什么地方做的不够完善，请多多指教

看完上述内容，是不是对js实现自动生成表格功能的代码实例有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。

收起

展开全文
用js+xml自动生成表格的东西
2020-12-09 00:38:47

代码如下:<... <head> <... charset=gb2312″> <title>无标题文档</title> [removed] function loadXML(handler) { var url = “employees.xml”; if(document.implementation&&document...

收起
JavaScript 自动在表格前面增加序号
2020-10-29 17:05:02

JavaScript 自动为表格增加序号，也就是不手动添加序号，让JS自动计算出行数，然后为表格的每行自动加一个序号，行号列的数字随TR 的增加自动增加1，我觉得还挺实用吧。

收起

JavaScript动态生成表格

2022-04-09 22:35:25

initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> 案例实现：动态生成表格title> <style> a { text-decoration: none; } a:hover { color: #a5f5cd; } table { width: 500px; margin: ...

源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>案例实现：动态生成表格</title>
    <style>
        a {
            text-decoration: none;
        }
        a:hover {
            color: #a5f5cd;
        }
        
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>角色</th>
                <th>法术</th>
                <th>法力</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格数据动态生成 -->
            <!-- <tr>
                <td></td>
            </tr> -->
        </tbody>
    </table>
    <script>
        // 模拟数据：利用对象存储数据
        // step1. 准备不同人物的数据
        // 数组对象 datas 可以存储任意类型数据
        // 每个数组元素 datas[i] 都是一个对象
        var datas = [{
            // 角色
            name: '闻人翊悬',
            // 法术
            magic: '火系',
            // 法力
            mana: 85
        }, {
            name: '申屠子夜',
            magic: '水系',
            mana: 80
        }, {
            name: '公仪楚人',
            magic: '土系',
            mana: 85
        }, {
            name: '容成墨熙',
            magic: '木系',
            mana: 90
        }, {
            name: '轩辕神君',
            magic: '金系',
            mana: 100
        }, {
            name: '小新',
            magic: '童系',
            mana: 100
        }];

        //获取根节点
        var tbody = document.querySelector("tbody");
        // step2. 所有数据都是放在 tbody 中的 tr 里面
        for(var i = 0; i < datas.length; i++){
            var newNode_tr = document.createElement("tr");
            //填充表格数据
            for (var key in datas[i]){
                var newNode_td = document.createElement("td");
                newNode_td.innerText = datas[i][key];
                newNode_tr.appendChild(newNode_td);
            }
            //绑定删除按钮
            var del_td = document.createElement("td");
            var del_btn = document.createElement("a");
            del_btn.innerText = "删除";
            del_btn.href = "#";
            //绑定单击事件，获取单击对象的父级的父级
            del_btn.onclick = function (){
                tbody.removeChild(this.parentNode.parentNode);
            }
            del_td.appendChild(del_btn);
            newNode_tr.appendChild(del_td);
            tbody.appendChild(newNode_tr);
        }
    </script>
</body>
</html>

运行结果

在这里插入图片描述

收起

展开全文

JS实现动态生成表格并提交表格数据向后端
2020-11-24 09:57:41

本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码，分享给大家供大家参考，具体内容如下先来看一下需求：在web页面上动态的生成表格，并可以对表格中的数据进行编辑，然后把表格中的数据提交至后端...

收起
JS自动生成二维表格数据图
2020-06-12 11:01:13

根据预设XY坐标随机点数量自动生成二维图形表格、表格有交叉点、线、面，每个交叉点根据坐标编号，可以随机生成定位点。

收起
自动生成表格的JS插件
2013-10-15 10:48:31

超轻量级，根据JSON数据自动生成表格，接口灵活多样可配置，内置分页，排序等功能。

收起
js自动生成表格，并显示分页按钮！和ajax方法封装！
2019-07-10 19:31:08

js自动生成表格并显示分页按钮和数据！ $.fn.extend({ /* cols：表头列名 data：数据 opt：是否带操作列，如果带，填写操作，如果不带，null 或者 false */ table: function (cols, data, ...

收起

html ajax page
js动态生成表格案例（使用事件委托）
2020-08-17 12:08:51

目录 1 案例效果 2 案例思路 3 案例源码 1 案例效果 2 案例思路第一步：静态页面布局 <input type="text" id="row" ...input type="button" id="btn" value="生成"> <table b...

收起
解析json自动生成表格
2022-02-05 13:03:55

将一个含有学生信息的josn字符串中信息解析出来，并将里面的内容添加到表格中。假设：从java程序后端传递进来一个如下json字符串 “{“total”:2,“students”:[{“name”:“Jim”,“age”:20},{“name”:“Tom”,...

收起

json 前端
JavaScript动态生成表格的示例
2021-01-18 17:25:11

通过JS来写动态的表格（有多少组数据，就自动创建多少行表格）为学习和演示，采用固定的数据，不涉及调用后台数据代码实现： HTML内容：姓名科目成绩操作 <tbody></tbody> CSS内容： table ...

收起
jQuery仿淘宝商品多规格SKU，自动生成表格表单
2018-06-25 20:44:21

jQuery仿淘宝商品多规格SKU，自动生成表格表单，jQuery仿淘宝SKU选择商品属性代码

收起
js自动生成表格，js表格生成游戏，js找茬猜字游戏
2018-05-09 23:40:16

<!DOCTYPE html> <html> <...js找茬游戏，表格生成游戏</title> </head> <body> <script>

收起
JavaScript 动态生成表格 及删除表格
2022-01-15 12:05:39

创建表格表头 <body> <table> <thead> <tr> <td>序号</td> <td>姓名</td> <td>性别<...

收起
动态生成表格实例(html-javascript操作表格处理)
2021-02-17 01:56:11

动态生成表格案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...

收起

html web css
react-hook-form-auto:使用ReactHookForm自动生成表格
2021-04-28 06:22:06

这个库允许您的React应用程序使用自动生成表单。表单和验证是根据受启发的模式生成的。内容其他架构字段架构图 Autoform组件设定档野外道具优先胁迫者翻译 tr() stringExists() 变量替代添加字符串多...

收起
js根据成绩表数组生成表格。
2022-04-18 16:51:25

来生成一个表格，结果如下：数组已经给了总成绩。和评价等级。代码如下：首先写css样式： html里面写一个div就可以了 js代码如下：第一层for循环是行数，即成绩数组的长度。里面的一层for循环是数组里面的元素...

收起

1. appendchild：

2. for (var k in datas[i])：for...in...语句

js自动生成表格

js简单实现自动生成表格功能示例

基于JavaScript代码实现自动生成表格

用js实现的一个根据内容自动生成表格的函数

原生js自动生成表格

原生js自动生成表格

JavaScript实现动态生成表格

js实现自动生成表格功能的代码实例

用js+xml自动生成表格的东西

JavaScript 自动在表格前面增加序号

JavaScript动态生成表格

源代码

运行结果

JS实现动态生成表格并提交表格数据向后端

JS自动生成二维表格数据图

自动生成表格的JS插件

js自动生成表格，并显示分页按钮！和ajax方法封装！

js动态生成表格案例（使用事件委托）

解析json自动生成表格

JavaScript动态生成表格的示例

jQuery仿淘宝商品多规格SKU，自动生成表格表单

js自动生成表格，js表格生成游戏，js找茬猜字游戏

JavaScript 动态生成表格及删除表格

动态生成表格实例(html-javascript操作表格处理)

react-hook-form-auto:使用ReactHookForm自动生成表格

js根据成绩表数组生成表格。

js 自动生成表格

1. appendchild：

2. for (var k in datas[i])：for...in...语句

js自动生成表格

js简单实现自动生成表格功能示例

基于JavaScript代码实现自动生成表格

用js实现的一个根据内容自动生成表格的函数

原生js自动生成表格

原生js自动生成表格

JavaScript实现动态生成表格

js实现自动生成表格功能的代码实例

用js+xml自动生成表格的东西

JavaScript 自动在表格前面增加序号

JavaScript动态生成表格

源代码

运行结果

JS实现动态生成表格并提交表格数据向后端

JS自动生成二维表格数据图

自动生成表格的JS插件

js自动生成表格，并显示分页按钮！和ajax方法封装！

js动态生成表格案例（使用事件委托）

解析json自动生成表格

JavaScript动态生成表格的示例

jQuery仿淘宝商品多规格SKU，自动生成表格表单

js自动生成表格，js表格生成游戏，js找茬猜字游戏

JavaScript 动态生成表格 及删除表格

动态生成表格实例(html-javascript操作表格处理)

react-hook-form-auto:使用ReactHookForm自动生成表格

js根据成绩表数组生成表格。

js 自动生成表格

JavaScript 动态生成表格及删除表格