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

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

<!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>
    <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>

展开全部

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

3条回答默认最新

心寒丶全栈领域优质创作者 2022-12-14 06:42

关注

功能可以实现，如果格式有要求，改下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>

展开全部

本回答被题主选为最佳回答 , 对您是否有帮助呢?

编辑记录

weixin_57649440 2022-12-14 07:07

weixin_57649440 2022-12-14 07:13

 可不可以改成这样

心寒丶回复 weixin_57649440 2022-12-14 07:17

 这样？前面加上字不就行了么

展开全部12条评论

查看更多回答(2条)

编辑

预览

报告相同问题？

关注问题

exel VB编程语言入门
2025-01-03 12:16

weixin_44245323的博客 age = ageEnd SubGet##### 2.2 .1 类和对象的概念在面向对象编程中，类是一种抽象的数据类型，它定义了一组属性和方法，用于描述一类具有相同特征和行为的对象。而对象则是##### 2.2 .1 Vb中的类在Vb中，类是一种...
asp.net学生成绩管理系统(源代码+论文).zip
2023-06-03 15:43

ASP.NET学生成绩管理系统是一个基于Web的教育管理应用，它使用C#编程语言和ASP.NET框架构建，旨在方便教师、学生以及管理员对学习成绩进行高效、便捷的管理。系统通常包括成绩录入、查询、统计分析、成绩发布等功能...
学生成绩管理系统
2017-05-24 08:22

在这个系统中，PHP作为后端编程语言，负责处理服务器端的逻辑，MySQL作为数据库管理系统，用于存储和检索成绩数据，而HTML则作为前端基础，构建用户界面，使用户能够与系统交互。 1. PHP：全称“Hypertext ...
ASP实例开发源码-asp成绩查询系统 v4.6.0.zip
2022-11-13 22:12

- 成绩录入和管理页面，用于输入、修改或删除成绩。 - 查询接口，允许用户输入特定条件（如学号、姓名等）来查询成绩。 - 可能还会有权限控制，如管理员界面和普通用户界面的区分。 "使用须知.txt"文件可能包含了...
Java+Servlet+JSP+Bootstrap+Mysql学生成绩管理系统-2
2021-07-03 09:28

首先，Java是整个系统的基础，它是一种广泛使用的面向对象的编程语言，特别适合于构建服务器端应用程序。Servlet是Java的一个关键组件，它扩展了Web服务器的功能，允许开发者创建动态响应的Web应用。在这个系统中，...
vb学生成绩管理系统设计(论文+源代码).rar
2022-06-04 02:21

这个系统的设计和实现涉及到多个IT领域的知识点，包括编程语言、数据库管理、用户界面设计以及软件工程的基本原则。首先，VB是Microsoft开发的一种可视化的编程环境，基于Basic语言，以其简单易学和强大的图形用户...
Java+mysql Server学生成绩管理系统（代码+数据库
2013-12-18 08:43

可能包括表格显示成绩、搜索框查找学生、表单输入新数据等元素。 7. **异常处理与错误反馈**：程序应能够捕获和处理可能出现的异常，防止程序崩溃，并向用户提供有意义的错误信息，以便他们了解问题所在并采取...
基于数据可视化大屏+SpringBoot+Vue的学生成绩档案管理系统设计和实现(源码+论文+部署讲解等)
2024-08-25 06:33

java李杨勇的博客在windows10的系统环境下，采用的编程语言为java和springboot框架，将mysql作为后台数据库来实现学业导师流程中的各种需求。程序上交给用户进行使用时，需要提供程序的操作流程图，这样便于用户容易理解程序的具体...
C#成绩查询简单系统.rar
2021-07-20 05:59

【C#成绩查询简单系统】是一个基于C#编程语言开发的Web应用程序，用于实现学生考试成绩的查询功能。这个系统通常包含几个核心组件，如数据存储、用户界面和后端处理逻辑，使得教师或管理员能够方便地管理和查看学生...
毕业设计：基于PHP后端语言与html+css+javascript前端的高校教师管理系统(含开发文档).zip
2023-11-06 07:30

这个系统可能是为了帮助高校管理者更有效地进行教师信息管理、课程安排、成绩录入等日常管理工作。首先，我们需要了解PHP。PHP是一种广泛使用的开源脚本语言，尤其适用于Web开发，可以嵌入到HTML中，为服务器端...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 12月21日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 12月14日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 12月14日

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

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

3条回答 默认 最新

问题事件

3条回答默认最新