码迷,mamicode.com
首页 > 其他好文 > 详细

动态加载表格数据(自定义)

时间:2018-06-08 20:43:13      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:play   body   onclick   red   +=   data   src   1.9   数据   

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
tr>td{
width: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<ul id="boxUl"></ul>
<div>展示:<span id="showImessage"></span></div>
<button onclick="suanf(0)">加</button><button onclick="suanf(1)">减</button>
<table id="box">
<thead>
<tr>
<th>姓名:</th>
<th>年龄:</th>
<th>爱好:</th>
<th>运动:</th>
</tr>
</thead>
<tbody id="bodybox"></tbody>
</table>
<script src="./js/jquery-1.9.1.min.js" ></script>
<script>
//<!-- 动态添加数据-->
var data=["1232","123we","aeds"];
var str="";
for(var i=0;i<data.length;i++){
str +="<li"+">"+data[i]+"</li"+">"
}
$("#boxUl").append(str)
//点击加减1
var o=0;
function suanf (jia){
if(jia == "0"){
o ++;
$("#showImessage").html(o)
}else if(jia == "1"){
o --;
$("#showImessage").html(o)
}
}
//动态加载表格数据
var dataArry=[
{‘name‘:"张三",‘age‘:"15",‘like‘:"羽毛球",‘play‘:"运动"},
{‘name‘:"小时",‘age‘:"4",‘like‘:"足球",‘play‘:"运动"},
{‘name‘:"利达",‘age‘:"7",‘like‘:"画画",‘play‘:"运动"},
{‘name‘:"吴家",‘age‘:"21",‘like‘:"乒乓球",‘play‘:"运动"}
];
for(var s =0;s<dataArry.length;s ++){
var $trTemp = $("<tr></tr>");
$trTemp.append("<td"+">"+(dataArry[s].name) +"</td"+">");
$trTemp.append("<td"+">"+ (dataArry[s].age) +"</td"+">");
$trTemp.append("<td"+">"+ (dataArry[s].like) +"</td"+">");
$trTemp.append("<td"+">"+ (dataArry[s].play) +"</td"+">") ;
$trTemp.appendTo("#bodybox");
}
</script>
</body>
</html>

动态加载表格数据(自定义)

标签:play   body   onclick   red   +=   data   src   1.9   数据   

原文地址:https://www.cnblogs.com/lihong-123/p/9157344.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!