簡(jiǎn)單實(shí)現(xiàn)。。。
?<body>
? ? ? ? <input type="button" id="btn" value="提交"/>
? ? ? ? <ul></ul>
? ? ? ? <script>
? ? ? ? ? ? var stulist=[
? ? ? ? ? ? ? ? {"stu":"xiaoming","age":22},
? ? ? ? ? ? ? ? {"stu":"xiaohong","age":23},
? ? ? ? ? ? ? ? {"stu":"xiaoli","age":24}
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? $("#btn").click(function(){
? ? ? ? ? ? ? ? ? ? $.each(stulist,function(index,item){
? ? ? ? ? ? ? ? ? ? ? ? $("ul").append("<li>"+"name="+item["stu"]+";age="+item["age"]+"</li>")
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? })
? ? ? ? </script>
? ? </body>
2021-08-24
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <title>挑戰(zhàn)題</title>
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? ? ? <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
? ? ? ? <style>
? ? ? ? ? ? ul {margin: 0; padding: 0;}
? ? ? ? ? ? li { list-style: none;}
? ? ? ? ? ? .txt { padding-left: 4px; outline: none;}
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <form action="#" method="get">
? ? ? ? ? ? <label>
? ? ? ? ? ? ? ? <input id="txt" class="txt" type="text" name="UserName" placeholder="請(qǐng)輸入姓名">
? ? ? ? ? ? </label>
? ? ? ? ? ? <input id="save-btn" type="button" value="保存數(shù)據(jù)">
? ? ? ? ? ? <input id="show-btn" type="button" value="顯示數(shù)據(jù)">
? ? ? ? </form>
? ? ? ? <ul></ul>
? ? ? ? <script>
? ? ? ? ? ? var $txt = $('#txt');?
? ? ? ? ? ? //定義一個(gè)json對(duì)象，用于保存學(xué)生的相關(guān)資料
? ? ? ? ? ? var json = [];
? ? ? ??
? ? ? ? ? ? $('#save-btn').on('click', function () {
? ? ? ? ? ? ? ? json.push({
? ? ? ? ? ? ? ? ? ? name : $txt.val()
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? $txt.val('');
? ? ? ? ? ? });
? ? ? ? ? ? $('#show-btn').on('click',function () {
? ? ? ? ? ? ? ? //通過$.each()工具函數(shù)，獲取數(shù)組中各元素的名稱與內(nèi)容，顯示在頁面中。?
? ? ? ? ? ? ? ? $('ul').empty();
? ? ? ? ? ? ? ? $.each(json,function (i) {
? ? ? ? ? ? ? ? ? ? $('ul').append('<li>'+json[i].name+'</li>');
? ? ? ? ? ? ? ? });
? ? ? ? ? ? });
? ? ? ??
? ? ? ? </script>
? ? </body>
</html>
2018-11-19
還得在<head>標(biāo)簽加上jquery引用
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>