数据:
var datas = [{ ???????name:"淘宝", ???????url:"www.taobao.com", ???????type:"购物网站" ???},{ ???????name:"百度", ???????url:"www.baidu.com", ???????type:"搜索网站" ???},{ ???????name:"腾讯", ???????url:"www.qq.com", ???????type:"综合网站" ???}];
效果:
源码:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>表格动态添加数据</title> ???<script src="jquery-3.3.1.js"></script></head><body><style> ???table{ ???????border-collapse: collapse; ???????border-spacing: 0; ???????border: 1px solid #c0c0c0; ???} ???th,td{ ???????border: 1px solid #d0d0d0; ???????color: #404060; ???????padding: 10px; ???} ???th{ ???????background-color: #0A7EC3; ???????font: bold 16px "微软雅黑"; ???????color: #fff; ???}</style><script type="text/javascript"> ???var datas = [{ ???????name:"淘宝", ???????url:"www.taobao.com", ???????type:"购物网站" ???},{ ???????name:"百度", ???????url:"www.baidu.com", ???????type:"搜索网站" ???},{ ???????name:"腾讯", ???????url:"www.qq.com", ???????type:"综合网站" ???}]; ???$(function () { ???????var tableHtml = ""; ???????for(var i in datas){ ???????????tableHtml += "<tr>"; ???????????tableHtml += ???"<td>"+ datas[i].name +"</td>"; ???????????tableHtml += ???"<td>"+ datas[i].url +"</td>"; ???????????tableHtml += ???"<td>"+ datas[i].type +"</td>"; ???????????tableHtml += "</tr>"; ???????} ???????$("#aj_data").html(tableHtml); ???})</script><table> ???<thead> ???????<tr> ???????????<th width="">标题</th> ???????????<th>url</th> ???????????<th>备注</th> ???????</tr> ???</thead> ???<tbody id="aj_data"> ???</tbody></table></body></html>
jquery将json数据放入表格当中
原文地址:https://www.cnblogs.com/alex-xxc/p/10025875.html