动态加载表格数据（自定义）
Posted lihong-123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动态加载表格数据（自定义）相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于动态加载表格数据（自定义）的主要内容，如果未能解决你的问题，请参考以下文章