<! 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 ();
}
});