js创建表格

it2025-06-05 16

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //虚拟数据 var myFamily = [{ name: "小小鱼", subject: "生物", fen: 100 }, { name: "小小熊", subject: "生物", fen: 100 }, { name: "小小猴", subject: "物理", fen: 80 }, { name: "小小龙", subject: "化学", fen: 90 }, { name: "小小马", subject: "英语", fen: 85 }] var headDatas = ['名字', '学科', '成绩', '操作'] //创建一个盒子 var box = document.createElement('div') document.body.appendChild(box) //创建table标签 var table = document.createElement('table') table.style.border = '1px solid black' //给table添加样式 table.style.borderCollapse = 'collapse' //合并单元格 table.style.width = '400px' // table.style.height = '400px' //此行代码为了直观显示table //把创建的table放入box中 box.appendChild(table) //创建thead标签 var thead = document.createElement('thead') //把创建的thead放入table中 table.appendChild(thead) //创建tr标签 var tr = document.createElement('tr') tr.style.height = '40px' //给tr添加样式 tr.style.backgroundColor = 'chartreuse' //给tr添加样式 //把创建的tr标签放入thead thead.appendChild(tr) //创建多个th标签 for (var i = 0; i < headDatas.length; i++) { //创建th标签 var th = document.createElement('th') th.style.border = '1px solid black' //边框样式 // 把创建的th放入tr中 tr.append(th) //将headDatas赋给th中 th.innerHTML = headDatas[i] } //创建tbody标签 var tbody = document.createElement('tbody') //把创建的tbody放入table中 table.appendChild(tbody) //创建多个tr标签 for (var i = 0; i < myFamily.length; i++) { //创建tr标签 var tr2 = document.createElement('tr') tr2.style.height = '40px' //给tr添加样试 //把创建的tr放入tbody中 tbody.appendChild(tr2) //把myFamily中的数据赋给baby var baby = myFamily[i] // console.log(baby) //遍历对象 for (var k in baby) { // 创建多个td标签 var td = document.createElement('td') // 把td放入tr中 tr2.appendChild(td) //用文本接收baby的值 td.innerHTML = baby[k] td.style.textAlign = 'center' //文本样式 td.style.border = '1px solid black' //边框样式 } //创建td标签 var td2 = document.createElement('td') td2.style.border = '1px solid black' //边框样式 //把创建的td放入tr2中 tr2.appendChild(td2) //创建a标签 var del = document.createElement('a') //把创建的a放入td中 td2.appendChild(del) del.innerHTML = '删除' //将删除赋给这个表签中的文本 del.href = 'JavaScript:void[0]' //删除这一行 td2.style.textAlign = 'center' //文本样式 del.onclick = delFn //将整个匿名函数赋给点击事件 } //创建匿名函数 function delFn() { tbody.removeChild(this.parentNode.parentNode) //删除父级(tbody)中的子级[tr](this.parentNode)中的子级[td](this.parentNode.parentNode) } </script> </body> </html>

最新回复(0)