css
<style>
th,
td,
tr {
width: 100px;
border: 1px solid red;
}
table {
/* border: 1px solid red; */
border-collapse: collapse;
text-align: center;
}
</style>html
<table>
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>标签</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>三国演义</td>
<td>罗贯中</td>
<td>99.99</td>
<td>经典</td>
<td><a href="">删除</a></td>
</tr> -->
</tbody>
</table>
<div class="foot">
<p class="b">书名：<input type="text"></p>
<p class="n">作者: <input type="text"></p>
<p class="p">书名：<input type="text" ></p>
<p class="l">作者: <input type="text"></p>
<button class="submit">按钮</button>
</div>js
<script>
const list = [
{
book: '《三国演义》',
uname: '罗国中',
price: '99.99',
bq: '经典',
},
{
book: '《三国演义》',
uname: '罗国中',
price: '99.99',
bq: '经典',
},
{
book: '《三国演义》',
uname: '罗国中',
price: '99.99',
bq: '经典',
}
]
const tbody = document.querySelector('tbody')
const submit = document.querySelector('.submit')
const b = document.querySelector('.b>input')
const n = document.querySelector('.n>input')
const p = document.querySelector('.p>input')
const l = document.querySelector('.l>input')
function all() {
let str = ''
for (let i = 0; i < list.length; i++) {
str +=
` <tr>
<td>${i + 1}</td>
<td>${list[i].book}</td>
<td>${list[i].uname}</td>
<td>${list[i].price}</td>
<td>${list[i].bq}</td>
<td><a href="#" data-id=${i}>删除</a></td>
</tr>`
}
tbody.innerHTML = str
}
all()
//点击按钮渲染
submit.addEventListener('click', function () {
list.push({
book: b.value,
uname: n.value,
price:+ p.value,
bq: l.value,
})
all()
})
//删除
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
list.splice(e.target.dataset.id, 1)
console.log(e.target.dataset.id)
}
all()
})
</script>?
?