js-Dynamic Operation Form notes

HTML:<div id= "Data" > </div>

An empty div with ID data

Style

Table{width:500px;border-collapse:collapse;text-align:center;}
tr:hover{background-color: #ddd;}
td{border:1px solid #ccc; height:30px;}
thead td{font-weight:bold;}
a{display:inline-block;border:1px solid red;color:black;font-size:13px;height:20px;text-align:center; line-height:20px;}
A:hover{color:blueviolet;border:none;}
button{border:1px solid black;margin-top:10px; width:50px;height:20px;}
label{display:block;margin-bottom:10px; margin-top:10px;}
label input{margin-right:10px;}

Simply write a little CSS

Js:

var data=[
{"id": 1, "name": ' Chen Yi ', "arith": Language, "Chinese": All, "中文版",
{"id": 2, "name": ' Huang er ', "arith": "Language ": "," "English":
{"id": 3, "name": ' Zhang San ', "Arith":, "language": +, "中文版":
{"id": 4, "name": ' John Doe ', "Arith": "Language" : "The", "English":
{"id": 5, "name": ' Harry ', "Arith": +, "language": "中文版", "English":
{"id": 6, "name": ' Zhao Liu ', "Arith": "," language ": ", "Chinese": ",
{"id": 7, "name": ' Money Seven ', "Arith": "," Language " :", "Chinese":
{"id": 8, "name": ' Sun Eight ', "Arith": "Language" :, "中文版":
{"id": 9, "name": ' Yang Jiu ', "Arith":, "Language": ", " "English": "The",
{"id": Ten, "name": ' Wu 10 ', "arith": +, "language": "中文版":
];
function inittable () {
var table=document.createelement ("table");//Create empty Table object
var thead=table.createthead ();//Add thead in table
var tr=thead.insertrow ();//Add a line tr in thead
for (Tr.insertcell (). InnerHTML in data[0]);//Traverse all the properties of the 1th object in the data array and add to the THEAD
Tr.insertcell (). innerhtml= "Total";
Tr.insertcell (). innerhtml= "Operation";

var tbody=table.createtbody ();//Add tbody to table

For (var i=0;i<data.length;i++) {//Traverse each commodity object in the data array and add TR in tbody
var tr=tbody.insertrow ();
for (var key in Data[i]) {//Traverse all properties of the current Product object
Tr.insertcell (). innerhtml=data[i][key];//add TD to TR and set TD data
}
var total=data[i].arith+data[i].language+data[i].english;
Tr.insertcell (). innerhtml=total;
var btn=document.createelement ("a");//Create a element tag for delete button
btn.innerhtml= "Delete";
Tr.insertcell (). appendchild (BTN);//Add a TD to each line, where a button is placed
btn.onclick=function () {//For Delete button binding point Click OnClick Event
var tr=this.parentnode.parentnode;//find the row of the button (TR)
tr.parentNode.removeChild (TR);//delete the line
}
}
document.getElementById ("Data"). appendchild (table);//Append Table object to div with ID data

}

window.onload=function () {
inittable ();
}

JS part: Define an Array object first, then follow the table structure to refine the contents of the table.

Contrast:

js-Dynamic Operation Form notes