点击按钮在表格中添加和删除行

2025年4月25日 | 阅读 4 分钟

通常，我们会在 HTML 中创建一个表格和一个按钮，然后使用 JavaScript 为按钮提供功能。但是，如果我们想创建一个动态表格，一个可以通过单击按钮来更改行数的表格呢？本教程将展示一种实现此目的的方法。

目标：我们将创建一个表格和两个按钮。表格的第一列将包含复选框。第一个按钮用于添加行，第二个按钮用于删除选中的行。

HTML部分

创建表
将第一列的单元格类型设置为复选框
设置标题
创建两个按钮 - **添加新行**和**删除选中的行**

这是代码

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
</head>
<body>
    <h1>Dynamic Table</h1>
    <table id = "mytable">
    <tr><th></th><th>Roll Number</th><th>Name</th></tr>
    <tr><td><input type=checkbox></td><td><input></td><td><input></td></tr>
    </table>
    <br>
    <input type = button class = "b" value = "Add new row" onclick = row()>
    <input type = button class = "b" value = "Delete selected rows" onclick = del()>
</body>
</html>

输出

Add and Delete rows of a table on button clicks

CSS 部分

此功能不需要特殊的 CSS，但让我们使用边框和一些属性添加一点颜色来查看表格。

代码

<style>
  table, tr, th, td
    {
table-layout: fixed;
        border: 1px solid black;
        border-collapse: separate;
    }
    table{
        border-spacing: 3px;
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    }
    th{
        background-color: black;
        color: white;
    }
    .b{
        padding: 2px 15px;
        border-radius: 10px;
    }
    .b:active{
        transform: scale(0.98);
    }
    .b:hover{
        background-color: black;
        color: white;
    }
</style>

使用的属性

表格样式

属性	说明
table_layout: fixed	表格中所有单元格的布局保持固定（列宽），无论其中内容的长度如何。
border-spacing: 10px	单元格边框之间的距离或间距。仅当 border-collapse 设置为 separate 时才适用。我们可以设置垂直和水平距离。
box-shadow	为元素添加阴影。通过逗号分隔，我们可以为单个元素添加多个阴影。
border-radius	使元素的角落边缘变圆。（为元素添加圆角）。值越大，圆角越圆。我们可以为四个角指定四个值。
background-color	为元素的背景添加颜色。我们可以使用颜色名称或十六进制代码。
border	一个用于为元素的边框添加宽度、样式和颜色的属性。

Button (按钮)

属性	说明
padding	在元素与其周围边框之间创建空间。使用 padding-top、padding-right、padding-bottom 和 padding-left，我们可以为元素的每个侧面设置间距。
border-radius	使元素的角落边缘变圆。（为元素添加圆角）。值越大，圆角越圆。我们可以为四个角指定四个值。
hover: background-color	使用 element:hover，我们可以为用户将光标悬停（移动）到元素上时添加一个属性。在这里，我们正在更改背景颜色。
color	字体颜色。
active: tranform	使用 element:active，我们可以为用户点击元素时为其添加一个属性。Transform 用于为元素添加 2D 效果。在这里，我们使用 scale()。此函数可以调整元素大小，然后恢复到原始大小。我们用它来获得按下时的按钮效果。

输出

JavaScript 部分

现在是实际功能的时间了。我们需要编写两个函数，我们称它们为 `row()` 和 `del()`，分别对应两个按钮 - **添加新行**和**删除选中的行**。

代码

<script>
    function row()
    {
        var mytable =  document.getElementById("mytable");
        var rows = mytable.rows.length;
        var r = mytable.insertRow(rows);
        var c1 = r.insertCell(0);
        var c2 = r.insertCell(1);
        var c3 = r.insertCell(2);
        var checkbox = document.createElement("input");
        var roll = document.createElement("input");
        var name = document.createElement("input");
        checkbox.type = "checkbox";
        roll.type = "number";
        name.type = "text";
        c1.appendChild(checkbox);
        c2.appendChild(roll);
        c3.appendChild(name);
    }
    function del()
    {
        var mytable = document.getElementById("mytable");
        var rows = mytable.rows.length;
        for(var i = rows - 1; i > 0; i--)
        {
            if(mytable.rows[i].cells[0].children[0].checked)
            {
                mytable.deleteRow(i);
            }
        }
    }
</script>

使用的函数和属性

函数/属性	用途
Table.rows.length	获取表格的行数
Table.insertRow(index)	在指定的索引处插入一行
Row.insertCell(column)	在指定的行中插入一个单元格
document.createElement("input")	创建一个 HTML 元素，在本例中是输入字段。
checkbox.type = ""	声明允许进入元素的类型。在此情况下，输入字段为复选框。
c1.appendChild(checkbox)	将创建的元素设置到表格单元格中。
Table.rows[i].cells[0].children[0].checked	检查复选框是否被选中。
Table.deleteRow(i)	给定一个索引删除行。

机制

首先，我们使用 ID "mytable" 访问表格。然后，我们使用 `rows.length` 属性获取表格中现有的行数。接着，我们在表格的末尾索引处插入一个新行。我们使用 `c1`、`c2` 和 `c3` 来创建三个单元格。我们需要第一个单元格是复选框，接下来的两个是文本。因此，我们使用 `createElement("input")` 创建 HTML 元素，设置所需的类型，然后将其设置到单元格中。这是第一个函数。在第二个函数中，我们只需访问表格每一行的第一个单元格中的输入字段（复选框），然后在复选框被选中时删除该行。

下一主题如何使用 JavaScript 提交 HTML 表单

点击按钮在表格中添加和删除行

HTML部分

这是代码

CSS 部分

使用的属性

JavaScript 部分

使用的函数和属性

机制

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

点击按钮在表格中添加和删除行

HTML部分

这是代码

CSS 部分

使用的属性

JavaScript 部分

使用的函数和属性

机制

相关帖子

HTML 中 class 和 id 的区别

HTML P 标签

如何在 HTML 中添加外部 CSS

HTML 滑块

Textarea disabled

HTML 制表符

如何制作 HTML 下拉菜单

HTML 解析

HTML Link rel 属性

HTML 站点地图

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器