您的位置：首页 > Web前端 > JQuery

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

2016-12-29 00:00 721 查看 
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航