zoukankan      html  css  js  c++  java
  • Javascript/Jquery操作数组,增删改查以及动态创建HTML元素

    <html>
    <head>
        <title> New Document </title>
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            /* 测试一
            $(function () {
                var tbody = "";
                var obj = [{ "name": "张三", "password": "123456" }];
                $("#result").html("------------遍历对象 .each的使用-------------");
                alert(obj);//是个object元素
                //下面使用each进行遍历
                $.each(obj, function (n, value) {
                    alert(n + ' ' + value);
                    var trs = "";
                    trs += "<tr><td>" + value.name + "</td> <td>" + value.password + "</td></tr>";
                    tbody += trs;
                });
                $("#project").append(tbody);
            });
            */
    
            /*测试二
            $(function () {
                var tbody = "";
                //------------遍历数组 .each的使用-------------
                var anArray = ['one', 'two', 'three'];
                $("#result").html("------------遍历数组 .each的使用-------------");
                $.each(anArray, function (n, value) {
                    alert(n + ' ' + value);
                    var trs = "";
                    trs += "<tr><td>" + value + "</td></tr>";
                    tbody += trs;
                });
                $("#project").append(tbody);
            });
            */
    
            /*测试三
            $(function () {
                var tbody = "";
                //------------遍历List集合 .each的使用-------------
                var obj = [{ "name": "麦迪", "password": "123456" }, { "name": "科比", "password": "333333" }];
                $("#result").html("遍历List集合 .each的使用");
                alert(obj);//是个object元素
                //下面使用each进行遍历
                $.each(obj, function (n, value) {
                    alert(n + ' ' + value);
                    var trs = "";
                    trs += "<tr><td>" + value.name + "</td> <td>" + value.password + "</td></tr>";
                    tbody += trs;
                });
                $("#project").append(tbody);
            });
            */
    
    
            $(function () {
                var arr = [12, 23, 5, 3, 25, 98, 76, 54, 56, 76];
                alert(arr.join("_")); //返回字符串,将数组的每一个元素值用separator连接在一起。
    
                var slideArray =
                [
                    { "imgsrc": "a.jpg", "url": "", "alt": "这是a图片" },
                    { "imgsrc": "b.jpg", "url": "", "alt": "这是b图片" },
                    { "imgsrc": "c.jpg", "url": "", "alt": "这是c图片" },
                    { "imgsrc": "d.jpg", "url": "", "alt": "这是d图片" },
                    { "imgsrc": "e.jpg", "url": "", "alt": "这是e图片" }
                ];
                slideArray.push({ "imgsrc": "f.jpg", "url": "", "alt": "这是f图片" }); //添加对象
                //slideArray.splice(3, 1); //删除d 删除从指定位置开始的指定数量的元素,返回数组形式
                slideArray.splice(3, 1, { "imgsrc": "g.jpg", "url": "", "alt": "这是g图片" }); //对应位置删除d且插入新数据
                $("#btnArray").data("mydata", slideArray);  //data存储数据
                var mydata = $("#btnArray").data("mydata"); //获取数据
                for (var i = 0; i < mydata.length; i++) {
                    alert(mydata[i].imgsrc);
                }
            });
    
            $(function () {
                var a = $.buildHTML("a", "我是由模版生成的", {
                    id: "myLink",
                    href: "http://www.baidu.com"
                });
                $('#wrap1').append(a);
                var input = $.buildHTML("input", { //可自用定制属性输出
                    id: "myInput",
                    type: "text",
                    class: "myclass",
                    value: "我也是由模版生成的~~"
                });
                $('#wrap2').append(input);
            });
    
            $.buildHTML = function (tag, htmltxt, attrs) {
                // you can skip html param
                if (typeof (htmltxt) != 'string') {
                    attrs = htmltxt;
                    htmltxt = null;
                }
                var h = '<' + tag;
                for (attr in attrs) {
                    if (attrs[attr] === false) continue;
                    h += ' ' + attr + '="' + attrs[attr] + '"';
                }
                return h += htmltxt ? ">" + htmltxt + "</" + tag + ">" : "/>";
            }
        </script>
    </head>
    
    <body>
        <input type="button" id="btnArray" value="存储数组" /><br />
        <div id="result" style="font-size:16px;color:red;"></div>
        <table cellpadding=5 cellspacing=1 width=620 id="project" border="1">
            <tr>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </table>
    
        <div id="wrap1"></div>
        <div id="wrap2"></div>
    </body>
    </html>

  • 相关阅读:
    自己用 python 实现 base64 编码
    PHPStorm 修改类的命名空间
    PHP 发送邮件
    QQ邮箱开通SMTP服务
    Java 驼峰转下划线
    storage.setUserStorage “errcode":87009 "errmsg":"invalid signature
    window下 phpstorm 打不开
    VBS 去除文件夹下 Excel 的公式
    HTTPS 验证访问略记
    Ubuntu 搜狗输入法输入异常
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234074.html
Copyright © 2011-2022 走看看