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

来源：互联网发布：网络平台玩彩票合法吗编辑：程序博客网时间：2024/06/07 04:02
<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>
0 0