如何运用表单元素将成绩录入然后再点击删除

如何运用表单元素将成绩录入然后再点击删除，类似下面这个内容

img

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        table{
            margin: 100px auto;
            width: 300px;
        }
        th{
            border: 1px solid black;
        }
        td{
            border: 1px solid black;
        }
    style>
head>
<body>
    <table>
        <thead>
            <tr>
                <th>学号th>
                <th>姓名th>
                <th>分数th>
                <th>操作th>
            tr>
        thead>
        <tbody>tbody>
    table>
    <script>
        var tb = document.querySelector('tbody')
        function CreateItem(id,name,scroe){
            this.id = id
            this.name = name
            this.scroe = scroe
            this.render = function(){
                //  把数据插入到表格
                var row = document.createElement('tr')
                //tb.insertBefore()
                // 写入id
                var td = document.createElement('td')
                td.innerHTML = this.id
                row.appendChild(td)
                // 写入姓名
                td = document.createElement('td')
                td.innerHTML = this.name
                row.appendChild(td)
                // 写入分数
                td = document.createElement('td')
                td.innerHTML = this.scroe
                row.appendChild(td)
                // 操作
                td = document.createElement('td')
                var a = document.createElement('a')
                a.innerHTML = "删除"
                a.href = '#'
                a.onclick = function(){
                    tb.removeChild(row)
                }
                td.appendChild(a)
                row.appendChild(td)
                tb.appendChild(row)
            }
        }
        var item = new CreateItem(20201001,"张飞",100)
        item.render()
        item = new CreateItem(20201001,"赵云",100)
        item.render()
        item = new CreateItem(20201001,"刘备",100)
        item.render()
        item = new CreateItem(20201001,"乔丹",100)
        item.render()
    script>
body>
html>

功能可以实现，如果格式有要求，改下css就行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            margin: 100px auto;
            width: 300px;
        }
        th{
            border: 1px solid black;
        }
        td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    学号：<input  id="id">
    姓名：<input id="name">
    分组：<input id="scroe">
    操作：<input type="button"  value="保存" onclick="save();">
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>分数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        var tb = document.querySelector('tbody')
        function CreateItem(id,name,scroe){
            this.id = id
            this.name = name
            this.scroe = scroe
            this.render = function(){
                //  把数据插入到表格
                var row = document.createElement('tr')
                //tb.insertBefore()
                // 写入id
                var td = document.createElement('td')
                td.innerHTML = this.id
                row.appendChild(td)
                // 写入姓名
                td = document.createElement('td')
                td.innerHTML = this.name
                row.appendChild(td)
                // 写入分数
                td = document.createElement('td')
                td.innerHTML = this.scroe
                row.appendChild(td)
                // 操作
                td = document.createElement('td')
                var a = document.createElement('a')
                a.innerHTML = "删除"
                a.href = '#'
                a.onclick = function(){
                    tb.removeChild(row)
                }
                td.appendChild(a)
                row.appendChild(td)
                tb.appendChild(row)
            }
        }
        var item = new CreateItem(20201001,"张飞",100)
        item.render()
        item = new CreateItem(20201001,"赵云",100)
        item.render()
        item = new CreateItem(20201001,"刘备",100)
        item.render()
        item = new CreateItem(20201001,"乔丹",100)
        item.render()
         function save(){
         var tb = document.querySelector('tbody')
          var row = document.createElement('tr')
                //tb.insertBefore()
                // 写入id
                var td = document.createElement('td')
                td.innerHTML = document.getElementById("id").value;
                row.appendChild(td)
                // 写入姓名
                td = document.createElement('td')
                td.innerHTML = document.getElementById("name").value;
                row.appendChild(td)
                // 写入分数
                td = document.createElement('td')
                td.innerHTML = document.getElementById("scroe").value;
                row.appendChild(td)
                // 操作
                td = document.createElement('td')
                var a = document.createElement('a')
                a.innerHTML = "删除"
                a.href = '#'
                a.onclick = function(){
                    tb.removeChild(row)
                }
                td.appendChild(a)
                row.appendChild(td)
                tb.appendChild(row)
        }
    </script>
</body>
</html>

希望帮帮忙