Home > Developer > Web Develop
Dynamically generate tables and encapsulate functions:
1. Dynamically Create headers
* Create a table label by createelement (' table ')---Create a table header with createelement (' thead ') and include the header in the table by Table.appendchild (Thead ');
* * Same method for creating TR and placing tr in thead
The header data is then placed in the table header sequentially:
Putting the header data into the header (Theaddata is the data of the header, the parameter item for the function is the data content)
The method of creating the header is encapsulated into function Creathead (parent,headdata) () where the parent is the container for table loading
2. Dynamically Create Tbody
* Create tbody with createelement (' tbody ') and put it in table--same way to put data into tbody
* * The method of creating tbody is encapsulated into function creatbody (table,bodydata) () {}
3. Delete operation
* to each line of TR plus a TD used to put the deletion of the operation, here put a label, note to give a tag set href:javaScript:void (0), so that a tag click Do not jump
* * Because the delete operation is more serious, before deleting a box to determine whether to delete, when determined to delete the corresponding TR from the Tbody
4. Calling functions to dynamically create a table
* As the method of generating headers and tbody is encapsulated in a function, it is now only possible to create a function that generates a complete table with the functions of generating headers and tbody.
* * Call the encapsulation function when you are using it.
Full code:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Dynamic Packaging Forms </title>
<style type= "Text/css" >
#box table{
Border-collapse:collapse; /* When there are two border lines, only one border line is displayed */
}
</style>
<body>
<div id= "box" >
</div>
<script type= "Text/javascript" >
Data items in a table
var bodydata=[
{Name: "Chieh", Subject: "Chinese", Scoer: "90"},
{Name: "Zhangxiaomei", Subject: "Chemistry", Scoer: "96"},
{name: "Li Jieke", Subject: "English", Scoer: "80"},
{Name: "Easy Dream Cloud", Subject: "Math", Scoer: "99"},
{Name: "Wangxiaoqing", Subject: "Physical", Scoer: "70"},
];
Defining the contents of a table header
var headdata=[' name ', ' Subject ', ' score ', ' Operation ';
var Box=document.getelementbyid (' box ');
Call the function that created the table
Creattable (Box,headdata,bodydata);
Define a function to create a table
function Creattable (parent,headdata,bodydata) {
var table=creathead (parent,headdata);//call to create a table header function
Creatbody (table,bodydata);//Call the function that creates the data item
}
//define function to create header
function Creathead (parent,headdata) {
//Dynamically generate Table label
var table=document.createelement (' table ');
//write the table label to the box's Div
parent.appendchild (table);
Table.border= ' 1px ';
table.width= ' 500px ';
Table.cellspacing=0;
//dynamically generate the Thead label in the header
Var thead=document.createelement (' thead ');
Write the thead tag to table
Table.appendchild (thead);
Dynamically generate TR label
var tr=document.createelement (' tr ');
Write the TR label to the THEAD label
Thead.appendchild (tr);
tr.style.height= ' 35px ';
tr.style.background= ' Lightgray ';
//Header Traversal
Headdata.foreach (function (item) {
//dynamically generate th tag
var th=document.createelement (' th ');
Write th tag to th
tr.appendchild (th);
Writes table header data to th
Th.innerhtml=item;
})
Return table;
}
function Creatbody (table,bodydata) {
/* Set data row */
var tbody=document.createelement (' tbody ');
Table.appendchild (TBODY);
Traversing data
Bodydata.foreach (function (item) {
Tr=document.createelement (' tr ');
Tbody.appendchild (TR);
for (var key in Item) {//assigns each property of item this object to key
var td=document.createelement (' TD ');
Tr.appendchild (TD);
Td.innerhtml=item[key];
}
/* Column of Operations */
var td=document.createelement (' TD ');
Tr.appendchild (TD);
var link=document.createelement (' a ');
link.href= ' javascript:void (0) ';
Td.appendchild (link);
Link.innerhtml= ' delete ';
/* Delete operation */
Link.onclick=linkclick;
})
function LinkClick () {
Prompts the user whether to delete
var r=confirm (' confirm delete ');
if (r) {
Delete
Get click
var Tr=this.parentnode.parentnode;
Tbody.removechild (TR);
}
}
};
</script>
</body>
Beginner JS---Dynamic generation table
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
