这篇博客介绍了如何利用JavaScript原生代码向HTML表格中动态添加数据。通过创建元素节点，遍历商品列表并逐个插入到表格的行和列中，实现了表格内容的动态更新。示例代码展示了如何构建样式化的表格以及填充数据。
CSS
html
js
代码复制如下
CSS
<style>
table {
width: 800px;
border: 1px solid #333;
border-collapse: collapse;
text-align: center;
}
th,
tr,
td {
border: 1px solid #333;
}
</style>
--------------------------------------------------------------------------------------------
html
<body>
<table class="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<!-- <th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th> -->
</tr>
</thead>
<tbody class="tbody">
</tbody>
</table>
-------------------------------------------------------------------
js
<script type="text/javascript">
let goodsList = [{ 1: '我', 2: '我', 3: '123' }, { 1: '678', 2: '678', 3: '678' }, { 1: '他', 2: '他', 3: '他' }]
// 创建元素节点，根据关系形成页面
var tbody = document.getElementsByClassName('tbody')[0]
for (var i = 0; i < goodsList.length; i++) {
var tr = document.createElement('tr')
tbody.appendChild(tr)
for (var k in goodsList[i]) {
var td = document.createElement('td')
td.innerHTML = goodsList[i][k]
tr.appendChild(td)
}
}
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
