大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的panda部落，panda每天与您一起进步
（效果图）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态生成表格案例</title> <style> </style> </head> <body> <style type="text/css"> table.gridtable { font-family: verdana, arial, sans-serif; font-size: 11px; color: #333333; border-width: 1px; border-color: #666666; border-collapse: collapse; width: 100%; font-size: 16px; text-align: center; } table.gridtable th { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede; } table.gridtable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff; } </style> <!-- Table goes in the document BODY --> <table class="gridtable"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> var data = [{ name: '小明', subject: '物理', score: '100' }, { name: 'marry', subject: '化学', score: '99' }, { name: 'luxi', subject: '语文', score: '78' }, { name: 'city', subject: '英语', score: '88' }, { name: 'city', subject: '英语', score: '88' }, { name: 'city', subject: '英语', score: '88' }, { name: 'city', subject: '英语', score: '88' }, { name: 'city', subject: '英语', score: '88' }, { name: 'city', subject: '英语', score: '88' }, { name: 'city', subject: '英语', score: '88' }, { name: 'city', subject: '英语', score: '88' }, { name: 'city', subject: '英语', score: '88' }, { name: 'city', subject: '英语', score: '88' }, { name: 'city', subject: '英语', score: '88' }, { name: 'city', subject: '英语', score: '88' }, ]; // 创建节点 var tbody = document.querySelector('tbody'); // 添加节点 // 创建行和单元格 for (var i = 0; i < data.length; i++) { // 创建tr行 var tr = document.createElement('tr'); tbody.appendChild(tr); //创建td单元格 for (var k in data[i]) { //创建单元格 var td = document.createElement('td'); tr.appendChild(td); console.log(data[i][k]); td.innerHTML = data[i][k] } // 创建删除功能 var td = document.createElement('td'); td.innerHTML = '<a href = "javascript:;">删除</a>'; // 添加节点 tr.appendChild(td); } // 删除功能 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function () { // 删除的是a标签所在的行(链接的父亲的父亲) tbody.removeChild(this.parentNode.parentNode); } } // for(var k in obj){ // k -- 属性名 // obj[k] -- 属性值 // } </script> </body> </html>