精华内容
下载资源
问答
  • 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]访问的才是属性值。

    更多相关内容
  • js自动生成表格

    2017-09-22 16:38:18
    jQuery表格生成插件Table.js。操作简单,资源中附带该类API,只需要使用几个简单的方法就可以生成一个漂亮的表格
  • 主要介绍了js简单实现自动生成表格功能,结合实例形式分析了JavaScript针对数组元素遍历与页面元素动态操作相关实现技巧,需要的朋友可以参考下
  • 废话不多说,直接给大家贴js...//js实现输入表格行数、列数自动生成表格源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
  • 晚上突然看到以前做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实现动态生成表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 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();

    }

    }

    代码效果:

    370bf5c7d437923f5c1999c0298a0607.png

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

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

    展开全文
  • 代码如下:<... <head> <... charset=gb2312″> <title>无标题文档</title> [removed] function loadXML(handler) { var url = “employees.xml”; if(document.implementation&&document...
  • 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实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端...
  • 根据预设XY坐标随机点数量自动生成二维图形表格表格有交叉点、线、面,每个交叉点根据坐标编号,可以随机生成定位点。
  • 超轻量级,根据JSON数据自动生成表格,接口灵活多样可配置,内置分页,排序等功能。
  • js自动生成表格并显示分页按钮和数据! $.fn.extend({ /* cols:表头列名 data:数据 opt:是否带操作列,如果带,填写操作,如果不带,null 或者 false */ table: function (cols, data, ...
  • 目录 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”,...
  • 通过JS来写动态的表格(有多少组数据,就自动创建多少行表格) 为学习和演示,采用固定的数据,不涉及调用后台数据 代码实现: HTML内容: 姓名 科目 成绩 操作 <tbody></tbody> CSS内容: table ...
  • jQuery仿淘宝商品多规格SKU,自动生成表格表单,jQuery仿淘宝SKU选择商品属性代码
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;...js找茬游戏,表格生成游戏&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt;
  • 创建 表格表头 <body> <table> <thead> <tr> <td>序号</td> <td>姓名</td> <td>性别<...
  • 动态生成表格案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
  • 这个库允许您的React应用程序使用自动生成表单。 表单和验证是根据受启发的模式生成的。 内容 其他架构字段 架构图 Autoform组件 设定档 野外道具优先 胁迫者 翻译 tr() stringExists() 变量替代 添加字符串 多...
  • 生成一个表格,结果如下: 数组已经给了总成绩。和评价等级。 代码如下: 首先写css样式: html里面写一个div就可以了 js代码如下: 第一层for循环是行数,即成绩数组的长度。 里面的一层for循环是数组里面的元素...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,291
精华内容 19,716
关键字:

js 自动生成表格