用js做小功能

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>