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>
: failed)
)
