- 技术
- 获取元素在渲染数据前后的问题
自己的问题（太菜）
<!DOCTYPE html
>
<html
>
<head lang
="en">
<meta charset
="UTF-8">
<title
></title
>
<style
>
table
{
width
: 800px
;
margin
: 0 auto
;
}
table
,
th
,
td
{
border
: 2px solid black
;
border
-collapse
: collapse
;
}
.cont td
:last
-child
{
text
-align
: center
;
}
.cont td
:nth
-of-type(1) {
text
-align
: center
;
}
</style
>
</head
>
<body
>
<table id
="table">
<!-- <thead
>
<tr
>
<th
><input type
="checkbox" name
="" class="thipt"></th
>
<th
>#
</th
>
<th
>姓名
</th
>
<th
>昵称
</th
>
<th
>年龄
</th
>
<th
>性别
</th
>
<th
>爱好
</th
>
<th
>操作
</th
>
</tr
>
</thead
> -->
<tbody
>
<tr
>
<td
><input type
="checkbox" name
="" class="thipt"></td
>
<td
>#
</td
>
<td
>姓名
</td
>
<td
>昵称
</td
>
<td
>年龄
</td
>
<td
>性别
</td
>
<td
>爱好
</td
>
<td
>操作
</td
>
</tr
>
</tbody
>
</table
>
<script
>
let data
= [
{
"name": "刘备",
"nickname": "小刘",
"age": 58,
"gender": "男",
"hobby": ["撩妹", "装逼", "编草鞋"]
},
{
"name": "关羽",
"nickname": "关二",
"age": 47,
"gender": "男",
"hobby": ["耍大刀", "变脸", "喝酒"]
},
{
"name": "张飞",
"nickname": "张三",
"age": 45,
"gender": "男",
"hobby": ["打架", "喝酒", "耍流氓"]
},
{
"name": "赵云",
"nickname": "赵四",
"age": 22,
"gender": "男",
"hobby": ["打架", "喝酒", "耍帅"]
},
{
"name": "貂蝉",
"nickname": "美女",
"age": 20,
"gender": "女",
"hobby": ["撩汉", "化妆"]
},
{
"name": "小乔",
"nickname": "乔二",
"age": 18,
"gender": "女",
"hobby": ["弹琴", "唱歌", "撩周瑜"]
}
]
let table
= document
.querySelector('#table')
let tbody
= document
.querySelector('tbody')
let thIpt
= document
.querySelector('.thipt')
console
.log(thIpt
)
thIpt
.onclick = function () {
console
.log(1)
}
render()
function render() {
data
.forEach(function (item
, i
) {
let { name
, nickname
, age
, gender
, hobby
} = item
tbody
.innerHTML
+= ` <tr class="cont" id="${i}">
<td><input type="checkbox" name="" id="" class="sel"></td>
<td>${i + 1}</td>
<td>${name}</td>
<td>${nickname}</td>
<td>${age}</td>
<td>${gender}</td>
<td>${hobby}</td>
<td><button>X</button></td>
</tr>`
})
}
let thIpt
= document
.querySelector('.thipt')
console
.log(thIpt
)
thIpt
.onclick = function () {
console
.log(1)
}
</script
>
</body
>
</html
>
感谢狗哥指导
Processed:
0.011, SQL:
9
