数据：
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>
原文地址：https://www.cnblogs.com/alex-xxc/p/10025875.html
时间： 2024-10-29 00:15:23