Javascript/Jquery操作数组，增删改查以及动态创建HTML元素

时间：2023-09-30 13:10:50
<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>

相关文章