JavaScript动态创建表格

你的名字 2023-07-13 03:46 29阅读 0赞

我们的目的就是在拿到数据后，通过js把数据渲染到表格的tbody中

html部分

<body>
    	 <table cellspacing="0" border="1" class="table3">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
    
            </tbody>
        </table>
    </body>

js部分

var datas = [
                { 
                    name: '小明',
                    subject: 'JavaScript',
                    score: 100
                },
                { 
                    name: '小红',
                    subject: 'JavaScript',
                    score: 98
                },
                { 
                    name: '小刚',
                    subject: 'JavaScript',
                    score: 99
                },
                { 
                    name: '小玉',
                    subject: 'JavaScript',
                    score: 96
                }
            ]
            var table3 = document.querySelector('.table3')
            var tbody3 = table3.children[1]
            console.log(tbody3)
            for (var i = 0; i < datas.length; i++) { 
    
                var tr = document.createElement('tr')
              
                tbody3.appendChild(tr)
                for (var k in datas[i]) { 
                    var td = document.createElement('td')
                    td.innerHTML = datas[i][k]
                    tr.appendChild(td)
                    // console.log(datas[i][k])
                }
                var td = document.createElement('td')
                var a = document.createElement('a')
    
    
                a.href = 'javascript:void(0);'
    
                a.innerHTML = '刪除'
                td.appendChild(a)
                 tr.appendChild(td)
               
    
               
            }
    
            for (var i = 0; i < tbody3.children.length; i++) { 
                var tr = tbody3.children[i]
                //console.log(tbody3.children[i])
                var removeTd = tr.children[tr.children.length - 1]
                //console.log(removeTd.parentNode)
                removeTd.onclick = function () { 
                    console.log(this)
                    // removeTd.parentNode.removeChild(removeTd)
                    this.parentNode.parentNode.removeChild(this.parentNode)
                }
            }

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript 动态表格操作

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

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

相关在 JavaScript 中动态创建表格、按钮和 DIV

使用 document.createElement() 方法，您可以在 JavaScript 中动态创建指定的 HTML 元素。创建后，您可以将元素插入（或添加）到您的网页，或

冷不防/ 2023年10月01日 18:58/ 0 赞/ 8 阅读

相关利用for in 动态创建表格

利用forin 动态创建表格 let hd = [{ title: "第一章走进JAVASCRIPT黑洞",

喜欢ヅ旅行/ 2023年07月23日 08:58/ 0 赞/ 27 阅读

相关 JavaScript 封装方法使用 while 动态创建表格

JavaScript 封装方法使用 while 动态创建表格 function tables(options = { tr: tr

以你之姓@/ 2023年07月23日 05:53/ 0 赞/ 14 阅读

相关 JavaScript动态创建表格

我们的目的就是在拿到数据后，通过js把数据渲染到表格的tbody中 html部分 <body> <table cellspacing="0" borde

你的名字/ 2023年07月13日 03:46/ 0 赞/ 30 阅读

相关 JavaScript（二）——创建表格

<!DOCTYPE html> <html> <head> <title></title> <

Bertha 。/ 2023年06月26日 12:12/ 0 赞/ 26 阅读

相关利用js动态创建表格

利用js动态创建表格（appendChild实现覆盖式创建）在用JS创建表格时如果用 document.write()的话会将页面全部覆盖，只能做到输入一次的效果。但是

末蓝、/ 2023年06月07日 10:48/ 0 赞/ 43 阅读

相关动态创建elementUI表格合计行

elementui加上合计行非常简单，在表格组件上，将show-summary设置为true就会在表格尾部展示合计行。定义自己的合计逻辑，使用summary-method并传入

淡淡的烟草味﹌/ 2022年12月25日 09:59/ 0 赞/ 356 阅读

相关 javascript 动态表格

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

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

相关 JavaScript 动态生成表格案例

功能描述在输入框中输入行和列，点击按钮，生成拥有对应行和列的表格。如下图所示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naG

系统管理员/ 2021年06月24日 16:10/ 0 赞/ 570 阅读