The implementation of the following programs can be understood as long as the previous content is mastered. This program uses Dom and JavaScript to display dynamic pages.
To create a table, you must first create an element:
For example, document. createelement ("TR ");
The name of the extracted element is obtained through getelementsbytagname. Note that an array is obtained.
Dynamiccontent.html:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> dynamically editing page content </title>
<SCRIPT type = "text/JavaScript">
VaR XMLHTTP;
Function createxmlhttprequest (){
If (window. activexobject ){
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest ){
XMLHTTP = new XMLHttpRequest ();
}
}
Function dosearch (){
Createxmlhttprequest ();
XMLHTTP. onreadystatechange = handlestatechange;
XMLHTTP. Open ("get", "dynamiccontent. xml", true );
XMLHTTP. Send (null );
}
Function handlestatechange (){
If (XMLHTTP. readystate = 4 ){
If (XMLHTTP. Status = 200 ){
Clearpreviusresults ();
Parseresults ();
}
}
}
Function clearpreviusresults (){
VaR header = Document. getelementbyid ("Header ");
If (header. haschildnodes ()){
Header. removechild (header. childnodes [0]);
}
VaR tablebody = Document. getelementbyid ("resultsbody ");
While (tablebody. childnodes. length> 0 ){
Tablebody. removechild (tablebody. childnodes [0]);
}
}
Function parseresults (){
VaR Results = XMLHTTP. responsexml;
VaR property = NULL;
VaR address = "";
VaR price = "";
VaR comments = "";
VaR properties = results. getelementsbytagname ("property ");
For (VAR I = 0; I <properties. length; I ++ ){
Property = properties [I];
Address = property. getelementsbytagname ("Address") [0]. firstchild. nodevalue;
Price = property. getelementsbytagname ("price") [0]. firstchild. nodevalue;
Comments = property. getelementsbytagname ("Comments") [0]. firstchild. nodevalue;
Addtablerow (address, price, comments );
}
VaR header = Document. createelement ("h2 ");
VaR headertext = Document. createtextnode ("results :");
Header. appendchild (headertext );
Document. getelementbyid ("Header"). appendchild (header );
Document. getelementbyid ("resultstable"). setattribute ("border", "1 ");
}
Function addtablerow (address, price, comments ){
VaR ROW = Document. createelement ("TR ");
VaR cell = createcellwithtext (Address );
Row. appendchild (cell );
Cell = createcellwithtext (price );
Row. appendchild (cell );
Cell = createcellwithtext (comments );
Row. appendchild (cell );
Document. getelementbyid ("resultsbody"). appendchild (ROW );
}
Function createcellwithtext (text ){
VaR cell = Document. createelement ("TD ");
VaR textnode = Document. createtextnode (text );
Cell. appendchild (textnode );
Return cell;
}
</SCRIPT>
</Head>
<Body>
<H1> Search real estate listings
<Form action = "#">
Show listings from
<SELECT>
<Option value = "50000"> $50,000 </option>
<Option value = "100000"> $100,000 </option>
<Option value = "150000"> $150,000 </option>
</SELECT>
To
<SELECT>
<Option value = "100000"> $100,000 </option>
<Option value = "150000"> $150,000 </option>
<Option value = "200000"> $200,000 </option>
</SELECT>
<Input type = "button" value = "Search" onclick = "dosearch ();"/>
</Form>
<Span id = "Header">
</Span>
<Table id = "resultstable" width = "75%" border = "0">
<Tbody id = "resultsbody">
</Tbody>
</Table>
</Body>
</Html>
Dynamiccontent. xml:
<? XML version = "1.0" encoding = "UTF-8"?>
<Properties>
<Property>
<Address> 812 Gwyn Ave </address>
<Price> $100,000 </price>
<Comments> quiet, serene neighborhood </comments>
</Property>
<Property>
<Address> 3308 James ave s </address>
<Price> $110,000 </price>
<Comments> close to schools, shopping, entertainment </comments>
</Property>
<Property>
<Address> 98320 County RD 113 </address>
<Price> $115,000 </price>
<Comments> small acreage outside of town </comments>
</Property>
</Properties>
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
