<! Doctype html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<Title> jquery dynamically adds elements </title>
<Script type = "text/Webpage effects" src = ".../jslib/jquery/jquery-1.3.2.min.js"> </script>
<Script type = "text/javascript">
// Add elements dynamically using jquery-a simple example
$ (Function (){
$ ("# Xselectop"). change (function (){
Var $ xaddelement = $ ("# xaddelement ");
Var xtext = "<input type = 'text' name = 'xtest' value = 'text'/> ";
Var xselect = "<select name = 'xtest'> <option value = '1'> ----- </option> <option value = '1'> text box </option> <option value = '2'> drop-down box </option> </select> ";
Var opval = this. value;
If ("1" = opval ){
$ Xaddelement. empty ();
$ Xaddelement. append (xtext );
} Else if ("2" = opval ){
$ Xaddelement. empty ();
$ Xaddelement. append (xselect );
}
});
});
</Script>
</Head>
<Body>
<Select id = "xselectop">
<Option value = "1"> ----- </option>
<Option value = "1"> text box </option>
<Option value = "2"> drop-down list </option>
</Select>
<Div id = "xaddelement"> </div>
</Body>
</Html>
Detailed description
Two methods are available:
1. When you click Add. Take the table and data directly from the back. The following is the ajax method.
2. Save your data in a hidden form. When you click the Add button, extract the data from the hidden form and add it to the table.
$. Ajax ({
Type: "get ",
Cache: false, // set the cache to false
Url: url // The background page to be processed
Beforesend: function (xmlhttprequest ){
//
// Showloading ();
},
// What do you do after the result is displayed successfully? data is the data submitted in the background. textstatus is the status.
The value can be renamed, for example (a, B)
Success: function (data, textstatus ){
$ (". Tb" 2.16.html (date)
});
},
// What do you want to do after completion? The difference between success and success is that success or failure will reach this stage.
Complete: function (xmlhttprequest, textstatus ){
// Hideloading ();
}
});
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
