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:

 <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>

Related articles: