為什么我的數(shù)據(jù)輸入后不能輸出來
<!DOCTYPE html>
<html>
??? <head>
??????? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
??????? <title>挑戰(zhàn)題</title>
??????? <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
??????? <style type="text/css">
??????????? input{
??????????????? display:block;
??????????????? margin:10px;
??????????? }
??????????? ul{
??????????????? list-style-type:none;
??????????? }
??????? </style>
??? </head>
??? <body>
??????? <div>
??????? <input? type="text" name="number" id="number" value="請輸入學號">
??????? <input type="text" name="name" id="name" value="請輸入姓名">
??????? <input type="button" name="save" id="save" value="保存">
??????? <input type="button" name="showup" id="showup" value="顯示">
??????? <ul id="studentData">
??????????? <li>姓名 學號</li>
??????? </ul>
??????? <script>
??????????? var json=[];
??????????? $("#save").on("click",function(){
??????????????? json.push(
??????????????????? {"name":$("#name").val()},
??????????????????? {"number"：$("#number").val()}
??????????????????? );
????????????????? $("#name").val("");
????????????????? $("#number").val("");
??????????? });
??????????? $("#showup").on("click",function(){
??????????????? $.each(json,function(i){
?????????????????? $("#studentData").append("<li>"+json[i].name+" "+json[i].number+"</li>");
??????????????? })
??????????? });
??????? </script>
??????? </div>
??? </body>
</html>
2017-08-16
我在你的基礎上簡單地改了一下， 有注釋的是我改的或添加的
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? ? ? <title>挑戰(zhàn)題</title>
? ? ? ? <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
? ? ? ? <style type="text/css">
? ? ? ? ? ? input{
? ? ? ? ? ? ? ? display:block;
? ? ? ? ? ? ? ? margin:10px;
? ? ? ? ? ? }
? ? ? ? ? ? ul{
? ? ? ? ? ? ? ? list-style-type:none;
? ? ? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <div>
? ? ? ? <input ?type="text" name="number" id="number" value="請輸入學號">
? ? ? ? <input type="text" name="name" id="name" value="請輸入姓名">
? ? ? ? <input type="button" name="save" id="save" value="保存">
? ? ? ? <input type="button" name="showup" id="showup" value="顯示">
? ? ? ? <ul id="studentData">
? ? ? ? ? ? <li>姓名 學號</li>
? ? ? ? </ul>
? ? ? ? <script>
? ? ? ? ? var json=[];
? ? ?$(function(){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? \\頁面加載
? ? ? ? ? ? $("#save").on("click",function(){
? ? ? ? ? ? ? ? json.push( ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? \\你原來的寫法是加入兩個數(shù)據(jù)，而不是一個數(shù)據(jù)含有兩
? ? ? ? ? ? ? ? ? ? {"name":$("#name").val(), ? ? ? ? ? ? ? ? ? ? ? ? ? ?\\個屬性。
? ? ? ? ? ? ? ? ? ? "number":$("#number").val()} ? ? ? ? ? ? ? ? ? ? ? \\在number后面的冒號應該是英文狀態(tài)下的冒號
? ? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? ? $("#name").val("");?
? ? ? ? ? ? ? ? ? $("#number").val("");
? ? ? ? ? ? });
? ? ? ? ? ? $("#showup").on("click",function(){
? ? ? ? ? ? ? ? $.each(json,function(i){
? ? ? ? ? ? ? ? ? ?$("#studentData").append("<li>"+json[i].name+" "+json[i].number+"</li>");?
? ? ? ? ? ? ? ? })
? ? ? ? ? ? });
? ? ?});
? ? ? ? </script>
? ? ? ? </div>
? ? </body>
</html>