数据：
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>