Jquery dynamic loop output table specific method
- 2020-03-29 23:57:53
- OfStack
Implementation functions:
1. One of my classmates asked me to implement a function like PHP, which is to enter Numbers in the form, and then the corresponding number will appear on the web page; If it is PHP, it will be much easier, Jquery implementation is still the first, started the crazy experiment, finally implemented (knowledge: Jquery to create nodes, get the value of the form, loop statement)
Jquery code:
HTML code:
The CSS code:
1. One of my classmates asked me to implement a function like PHP, which is to enter Numbers in the form, and then the corresponding number will appear on the web page; If it is PHP, it will be much easier, Jquery implementation is still the first, started the crazy experiment, finally implemented (knowledge: Jquery to create nodes, get the value of the form, loop statement)
Jquery code:
<script type="text/javascript" language="javascript">
$(function(){
$("#btn").click(function(){ //Select the element with ID BTN and add the click event
var result = $("input[name='text']").val(); //Gets the value of the text box with the name 'text and is defined as the variable result
$("div").remove(".abc"); //Remove the div containing the. ABC class every time it is executed.
for(i=1;i<=result;i++){ //For loop, constant I is equal to 1, plus 1 for each loop; When the value of I loops from 1 to the same value as result (that is, "the value of name='text' of the text box"), the loop stops
var createobj = $("<div class='abc'> Created node </div>"); //Define div as the variable createobj
$("body").append(createobj); //Append the createobj variable to the HTML 'body'
}
});
});
</script>
HTML code:
<body>
<input type="text" id="text" name="text" />
<input type="button" id="btn" value=" determine " />
</body>
The CSS code:
<style>
.abc {height:50px;width:50px; margin:20px;background:#ccc;}
</style>