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>