为什么我的数据输入后不能输出来

来源:1-11 编程练习

有晴无晴

2017-08-16 11:31

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</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>姓名&nbsp;&nbsp;学号</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+"&nbsp;&nbsp;"+json[i].number+"</li>");
                })
            });
        </script>
        </div>
    </body>
</html>

写回答 关注

1回答

  • 慕莱坞9796870
    2017-08-16 18:29:10

    我在你的基础上简单地改了一下, 有注释的是我改的或添加的

    <!DOCTYPE html>

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <title>挑战题</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>姓名&nbsp;&nbsp;学号</li>

            </ul>

            <script>

              var json=[];

         $(function(){                                                               \\页面加载

                $("#save").on("click",function(){

                    json.push(                                                       \\你原来的写法是加入两个数据,而不是一个数据含有两

                        {"name":$("#name").val(),                            \\个属性。

                        "number":$("#number").val()}                       \\在number后面的冒号应该是英文状态下的冒号

                        );

                      $("#name").val(""); 

                      $("#number").val("");

                });

                $("#showup").on("click",function(){

                    $.each(json,function(i){

                       $("#studentData").append("<li>"+json[i].name+"&nbsp;&nbsp;"+json[i].number+"</li>"); 

                    })

                });

         });

            </script>

            </div>

        </body>

    </html>


jQuery基础(五)一Ajax应用与常用插件

如何用jquery实现ajax应用,加入学习,有效提高前端开发速度

69095 学习 · 400 问题

查看课程

相似问题