<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>动态创建表格案例</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
* { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0;
} th,td { border: 1px solid #d0d0d0; color: #404060; padding: 10px;
} th { background-color: green; font: bold 16px "微软雅黑"; color: #fff;
} td { font: 14px "微软雅黑";
} tbody tr { background-color: #f0f0f0;
} tbody tr:hover { cursor: pointer; background-color: #fafafa;
} a{ color: #47C6DB;
} </style>
<script>
var data = [{ type: "水果", name: "香蕉", num: "100", terms:"查看详情",
},{ type: "水果", name: "苹果", num: "50", terms:"查看详情",
},{ type: "水果", name: "火龙果", num: "200", terms:"查看详情",
}];
$(function(){ //清空所有的子节点
$("#table_data").empty(); for( var i = 0; i < data.length; i++ ) { //动态创建一个tr行标签,并且转换成jQuery对象
var $trTemp = $("<tr></tr>"); //往行里面追加 td单元格
$trTemp.append("<td>"+ data[i].type +"</td>");
$trTemp.append("<td>"+ data[i].name +"</td>");
$trTemp.append("<td>"+ data[i].num +"</td>");
$trTemp.append("<td><a>"+ data[i].terms +"</a></td>");
$trTemp.appendTo("#table_data");
}
}); </script></head><body>
<table>
<thead>
<tr class="table_header">
<th>产品类别</th>
<th>产品名称</th>
<th>数量</th>
<th>详情</th>
</tr>
</thead>
<tbody id="table_data"></tbody>
</table></body></html>效果：
jQuery动态创建表格
作者：椰果粒
链接：https://www.jianshu.com/p/199f52d0ef19
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦