html动态生成可输入的表格,动态生成表格.html

table,

thead,

tr,

th,

td{

border: 0;

}

th {

width: auto;

}

姓名科目成绩操作

// 使用对象储存的数据，列表

data = [

{name: "魏璎珞", subject: "数学", score: 100},

{name: "魏璎珞", subject: "数学", score: 100},

{name: "魏璎珞", subject: "数学", score: 100},

{name: "魏璎珞", subject: "数学", score: 100},

{name: "曹操", subject: "语文", score: 200},

{name: "曹植", subject: "政治", score: 100},

{name: "曹植", subject: "政治", score: 100},

{name: "曹植", subject: "政治", score: 100},

{name: "曹植", subject: "政治", score: 100},

]

// 在tbody中创建tr，根据data的length创建

var tbody = document.querySelector("tbody");

for(var i = 0; i< data.length; i++){

// 1.创建tr

var tr = document.createElement("tr");

tbody.appendChild(tr);

// 2.创建tr内的td，循环一个tr内的所有td

for(var k in data[i]){

// 创建单元格

var td = document.createElement("td")

// 把对象的属性值复制给对象

td.innerHTML = data[i][k];

tr.appendChild(td);

}

// 3.创建删除单元格

var td = document.createElement("td");

td.innerHTML = "删除";

tr.appendChild(td);

}

// 处理删除逻辑

var a = document.querySelectorAll("a");

for(var i = 0; i < a.length; i++){

a[i].onclick = function (){

// 删除a所在的row node.removechild(child) 这个实在是诡异，removechild的调用主体是被删除目标的父级元素

tbody.removeChild(this.parentNode.parentNode)

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史