DOM动态生成表格

最新推荐文章于 2022-11-08 11:40:18 发布
最新推荐文章于 2022-11-08 11:40:18 发布
阅读量473 收藏 2
点赞数
分类专栏： DOM节点的 增 ·删· 改· 查 文章标签： JS动态生成表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38743783/article/details/82431944
版权

dom节点动态生成表格 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
        table{width: 500px;border:1px solid #ddd;border-collapse: collapse;}
        tr th,tr td{line-height: 35px;border: 1px solid #ddd;text-align: center;}
    </style>
    </head>
    <body>
        <script>
            //1.首先创建表格
            var tab=document.createElement('table');
            //2.创建表格标题
            var cap=document.createElement('caption');
            cap.innerHTML="510宿舍学生调查表";
            tab.appendChild(cap);

            var tr=HreadTR();
            tab.appendChild(tr);

            var tr1=createTR('1000','李龙飞',19);
            var tr2=createTR('1001','薛金灿',16);
            var tr3=createTR('1002','陈星杰',18);
            var tr4=createTR('1003','井含腾',17);
            var tr5=createTR('1004','刘璐璐',17);
            var tr6=createTR('1005','李明阳',17);
            tab.appendChild(tr1);
            tab.appendChild(tr2);
            tab.appendChild(tr3);
            tab.appendChild(tr4);
            tab.appendChild(tr5);
            tab.appendChild(tr6);

            //创建表头     行    
            function HreadTR(){
                var tr=document.createElement('tr');

                var th1=createTd('th',"编号",false);
                var th2=createTd('th',"名字",false);
                var th3=createTd('th',"年龄",false);
                var th4=createTd('th',"操作",false);

                tr.appendChild(th1);
                tr.appendChild(th2);
                tr.appendChild(th3);
                tr.appendChild(th4);
                return tr;
            }
            //创建普通表格      行
            function createTR(id,name,age){
                var tr=document.createElement('tr');

                var td1=createTd('td',id,false);
                var td2=createTd('td',name,false);
                var td3=createTd('td',age,false);
                var td4=createTd('td','删除',true);

                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                return tr;//把一行  返回给调用者
            }
    //创建列  tagName是创建 tr/td 不确定用变量来代替 text表格里的内容 isLink是判断创建链接还是普通表格
            function createTd(tagName,text,isLink){ 
                //创建表头 并且 创建普通表格 
                var th_td=document.createElement(tagName);
                if(isLink){//如果为真则创建超链接
                    var link=document.createElement('a');
                    link.href="#";
                    link.innerHTML=text;
                    th_td.appendChild(link);
                }else{
                    th_td.innerHTML=text;
                }
                return th_td;//创建完之后  把表格返回给调用者
            }

            //把表格加到body中
            document.body.appendChild(tab);
        </script>
    </body>
</html>

仔细观察后会发现，创建表头的行和普通的行代码基本一样。那么代码还能优化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
        table{width: 500px;border:1px solid #ddd;border-collapse: collapse;}
        tr th,tr td{line-height: 35px;border: 1px solid #ddd;text-align: center;}
    </style>
    </head>
    <body>
        <script>
            //1.首先创建表格
            var tab=document.createElement('table');
            //2.创建表格标题
            var cap=document.createElement('caption');
            cap.innerHTML="510宿舍学生调查表";
            tab.appendChild(cap);

            //'th'  创建表头行    true  
            var tr=createTR('th','编号','姓名','年龄','操作',true);
            tab.appendChild(tr);

            //创建普通行   
            var tr1=createTR('td','1000','李龙飞',19,'删除',false);//传入值
            var tr2=createTR('td','1001','薛金灿',16,'删除',false);
            var tr3=createTR('td','1002','陈星杰',18,'删除',false);
            var tr4=createTR('td','1003','井含腾',17,'删除',false);
            var tr5=createTR('td','1004','刘璐璐',17,'删除',false);
            var tr6=createTR('td','1005','李明阳',17,'删除',false);
            //把行添加到表格里
            tab.appendChild(tr1);
            tab.appendChild(tr2);
            tab.appendChild(tr3);
            tab.appendChild(tr4);
            tab.appendChild(tr5);
            tab.appendChild(tr6);

            //3.创建行  tagName决定是tr还是td,中间四个参数是决定一行的里面的内容,isHead是否有超链接
            function createTR(tagName,id,name,age,op,isHead){
                //创建行
                var tr=document.createElement('tr');
                //列    前三列都是普通文本
                var td1=createTd(tagName,id,false);//调用创建列函数
                var td2=createTd(tagName,name,false);
                var td3=createTd(tagName,age,false);
                if(isHead){
                    var td4=createTd(tagName,op,false);//第四列  表头内容 不是超链接
                }else{
                    var td4=createTd(tagName,op,true);//第四列  表格内容   是超链接
                }
                //把列放到行里面
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                return tr;//返回给调用者一行数据
            }

            //4.创建列  text表格里的内容  isLink是判断创建链接还是普通表格
            function createTd(tagName,text,isLink){ 
                // tagName是创建 tr/td 不确定用变量来代替
                var th_td=document.createElement(tagName);
                if(isLink){//如果为真则创建超链接
                    var link=document.createElement('a');
                    link.href="#";
                    link.innerHTML=text;
                    link.onclick=function(){
                        if(confirm("是否删除？")){
                            //当前是a a的父节点是td td的父节点是tr tr的父节点是table,表格删除一行
                            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                        }
                    }
                    th_td.appendChild(link);
                }else{
                    th_td.innerHTML=text;
                }
                return th_td;//创建完之后  把表格返回给调用者
            }
            //把表格加到body中
            document.body.appendChild(tab);
        </script>
    </body>
</html>

写了上面的例子，感觉参数的传递很重要。把变化的，不确定用变量来代替。那里调用再传入需要的值。不同的地方，传入不同的值。
第一个块代码啰嗦，重复的比较多。但是第二块代码却结构更加清晰。 一个函数一个功能。也体现了封装的重要性，方便。牢记这种方式。
加油！！！

年年CODE
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery动态创建DOM、表单元素的实现代码
10-28
代码很简单，直接上代码。别忘记引用JQuery包。
动态操作表格(DOM操作)
weixin_45846177的博客
11-16 812
动态操作表格(DOM操作) <table>元素是HTML中最复杂的结构之一。要想创建表格，一般都必须涉及表示表格行、单元格、表头等标签。由于涉及标签多，因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码。 首先，我们先来看下表格的HTML代码： <table border="1" width="600px"> <tbody> <tr> <td> cell
html根据数据动态创建表格,HTML　DOM动态创建表格（１）
weixin_42515990的博客
06-05 713
table,td,th{border:1pxsolidblack;color:red;}vartxt='[\{\"id":1,\"name":"张三",\"age":20\},\{\"id":2,\"name":"李四",\"age":21\},\{\"id":3,\"name":"王五",\"age":22\}\]';varperson=JSON.parse(txt);va...
js-DOM-动态表格练习
qq_33755492的博客
06-21 277
用户可以任意添加表格数据，删除表格数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid ; margin: auto; widt
JavaScript 中DOM动态添加，删除表格元素
weixin_43947715的博客
07-30 894
实现思路 1.创建一个table,thead,tbody,tr,td表格，这里thead,tbody能够更好的区分表头与表格中元素的关系。、 2.分别给定id获取 3.通过creatElement()，以及appenChild()添加 4.通过removeChild()方式删除，关键是要找到相对应的父节点和子节点 <script type="text/javascript"> win...
JavaScript 学习笔记（十三）Dom创建表格
12-10
Dom基础—创建表格 利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题，所以推荐使用第二种。 1、insertRow(index)：index从0开始 这个函数将新行添加到index的...
JS控制网页动态生成任意行列数表格的方法
10-24
主要介绍了JS控制网页动态生成任意行列数表格的方法,实例分析了javascript操作表格节点控制dom元素添加的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Dom生成表格和实现分页源码
09-27
dom转化为表格显示源码，并且有很强大的分页功能，搭上就能用
JavaScript DOM操作表格及样式
12-12
标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption...
用DOM控制的奇偶行变色的简单表格实现
10-10
用DOM控制的奇偶行变色的简单表格实现，通过javascript实现对奇偶行的表格背景颜色的控制
JS DOM动态创建表格 行 列
06-19
JS DOM动态创建表格 行 列
javascript动态创建表格及添加数据实例详解
12-09
本文实例讲述了javascript动态创建表格及添加数据的方法。分享给大家供大家参考。具体分析如下： 1. 动态创建表格（代码不兼容IE6） <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态创建表格</title> [removed] function AppendTableData() { var table = document.ge
使用JavaScript和DOM动态创建表格
10-19
使用JavaScript和DOM动态创建表格
核心DOM和动态表格案例
weixin_45317852的博客
03-05 149
核心DOM 1. Document对象 1. 创建：[window.]document 2. 方法 1. 获取Element对象 1. getElementById() 2. getElementsByTagName()：返回一个 NodeList 对象（可以作为只读数组处理） 3. getElementsByClassName() 4. getEle...
动态表格：基于DOM模型实现
Luis
04-12 164
HTML界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>动态表格</title> <style> table { border: 1px so...
DOM操作-表格的动态实现添加删除
zwb1365237878的博客
12-21 673
通过点击创建的BUTTON按钮实现添加和删除的功能 <style type="text/css"> p{ text-align: center; } button{ width: 150px; } td{ height: 50px; text-align: center; } span{ color: white; font-size: 14px; cursor: pointer; padd
HTML DOM对表格数据的动态操作
只为那一份执着
03-30 1129
以下为正文内容，功能主要实现在一个页面中完成对数据的增、删、改、查操作。 %@include file="check.jsp"%>       表格操作                       -->           //row操作行 cell操作单元格     function tbtest(){         //获得指定表格的所
DOM中表格元素动态获取和添加删除表格案列
weixin_58139900的博客
11-07 916
目录 表格元素的获取 table.tHead; 获取thead 获取到的是一个具体元素 table.tBodies; 获取tbody 获取到的是一个集合 table.tFoot; 获取tfoot 获取到的是一个具体元素 tbody.rows; 获取tr 获取到是一个集合 row.cells; 获取td 获取到是一个集合 表格的操作 添加删除表格案例 表格元素的获取 table.tHead; 获取thead 获取到的是一个具体元素 table.tBodies; 获取...
js dom之动态创建表格 最详细
aa147258aa147的博客
11-08 513
js dom之动态创建表格
用DOM动态生成表格
最新发布
05-30
好的，我可以帮你解答这个问题。 要用DOM动态生成表格，需要先创建一个table元素，然后在该元素下创建tr（行）和td（列）元素。 以下是一个示例代码： ```javascript // 获取table元素 var table = document.getElementById("myTable"); // 创建表头 var thead = document.createElement("thead"); var tr = document.createElement("tr"); var th1 = document.createElement("th"); var th2 = document.createElement("th"); th1.innerHTML = "姓名"; th2.innerHTML = "年龄"; tr.appendChild(th1); tr.appendChild(th2); thead.appendChild(tr); table.appendChild(thead); // 创建表格内容 var tbody = document.createElement("tbody"); for (var i = 0; i < data.length; i++) { var tr = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); td1.innerHTML = data[i].name; td2.innerHTML = data[i].age; tr.appendChild(td1); tr.appendChild(td2); tbody.appendChild(tr); } table.appendChild(tbody); ``` 在这个示例中，先获取了一个id为"myTable"的table元素，并创建了表头和表格内容。其中，表格内容是根据一个数组data动态生成的，data中包含了每个人的姓名和年龄。 注意，这只是一个简单的示例代码，实际情况可能需要更多的判断和处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值