我想要实现动态向tbody中动态插入一行数据,写了如下代码:
html:
<table id="theList">
<thead>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</thead>
<tbody id="myBody"></tbody>
</table>
js:
let list = []
let temp = []
list.push({
name: '张三',
age: 20,
sex: '男'
})
list.push({
name: '赵四',
age: 19,
sex: '女'
})
function render(data) {
var html=[]
for (let i = 0; i < data.length; i++) {
let template = '<tr><td>'+data[i].name+'</td><td>'+data[i].age+'</td><td>'+data[i].sex+'</td><td><a href="javascript:;">修改</a> <a href="javascript:;">删除</a></td></tr>'
html.push(template)
document.getElementById('myBody').appendChild(html.join(''))
}
}
render(list)
运行以上代码时浏览器抛出了Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.的错误,通过查阅资料了解到出错原因:
- appendChild()需要传入的是一个tr的对象,而不是tr的字符串
而上面html.join(”)是一个字符串
console.log(typeof html.join('')) //stirng
解决办法:
render函数这样写:
function render(data) {
for (let i = 0; i < data.length; i++) {
let tr = document.createElement('tr')
tr.innerHTML = '<td>'+data[i].name+'</td><td>'+data[i].age+'</td><td>'+data[i].sex+'</td><td><a href="javascript:;">修改</a> <a href="javascript:;">删除</a></td>'
document.getElementById('myBody').appendChild(tr)
}
}
此时的tr是一个对象。不过这样显得有些多此一举,不如直接这样写:
function render(data) {
var html=[]
for (let i = 0; i < data.length; i++) {
let template = '<tr><td>'+data[i].name+'</td><td>'+data[i].age+'</td><td>'+data[i].sex+'</td><td><a href="javascript:;">修改</a> <a href="javascript:;">删除</a></td></tr>'
html.push(template)
document.getElementById('myBody').innerHTML = html.join('')
}
}
运行效果图:
其他功能还在实现中…….