Today, let's talk about how JS dynamically adds data information. Because of my limited ability, I can only do it in the most silly way. However, the function is also implemented! You can click the button to add it continuously.
My idea is like this. First, you have to have a template. When you click a template, the duplicate of the template will always appear. It seems very simple. Yes, it is really very simple, because I don't know how to do it, but it does.
To better understand the code, I don't need Jquery. js. there's nothing to say. just click the button and copy the template at the end. You can directly view the instance and ask questions in the QQ group (5678537,70210212.
View DEMO:
<! DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> JS Dynamic Add Information-QQ 技术 群 5678537.70210212 </ title>
<meta http-equiv = "Content-Type" content = "text / html; charset = gb2312" />
<meta name = "MSSmartTagsPreventParsing" content = "true" />
<script type = "text / javascript">
function Add () {
var info = document.getElementById ("info");
var template = document.getElementById ("template");
var LR = template.innerHTML;
info.insertAdjacentHTML ("BeforeEnd", LR)
}
function Save () {
var list = document.getElementById ("info"). getElementsByTagName ("input");
for (var i = 0; i <list.length; i ++) {
alert (list [i] .value)
}
}
</ script>
</ head>
<body>
<p> You can use AJAX to pass values, or use request.form ("txtName") to get values. </ p>
<div class = "code">
<div id = "template" style = "display: block; display: none;">
<div>
<div> Name: <input type = "text" name = "txtName" /> </ div>
<div> Age: <input type = "text" name = "txtAge" /> </ div>
</ div>
</ div>
<div> <input type = "button" value = "add" onclick = "Add ()" /> </ div>
<div id = "info"> </ div>
<div> <input type = "button" value = "Save" onclick = "Save ()" /> </ div>
</ div>
</ body>
</ html> <div style = "text-align: center; margin: 30px 0 0 0;"> <hr style = "color: # 999; height: 1px;"> If the effect cannot be displayed, press Ctrl + F5 Reload this page with more web code: <a href='http://www.bkjia.com/' target='_blank'> http://www.bkjia.com/ </a> </ div>
Tip: the code can be modified before running!
(This article is reproduced in: lovewebgames.com)
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
