<!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)//点击加减1var 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>
原文地址:https://www.cnblogs.com/lihong-123/p/9157344.html
时间: 2024-10-09 16:07:55