DOM操作-数据表

最新推荐文章于 2021-11-22 08:51:39 发布

m0_48845795

最新推荐文章于 2021-11-22 08:51:39 发布

阅读量112

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_48845795/article/details/116942411

版权

这篇博客介绍了如何使用JavaScript进行DOM操作，特别是在数据表上的应用。内容包括新建表格、填充数据以及实现数据删除功能。文章配合示例图片展示了具体的操作效果和运行结果。

摘要由CSDN通过智能技术生成

DOM操作-数据表

新建一个表格，在表格上输入相应内容，在另外一个数据表上获得输入的数据，并且可以进行删除操作。效果如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nQOd5uHV-1621245614576)(C:\Users\moreintech-21\Desktop\markdown\图片\5.png)]

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>小测试</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .movie {
        margin: 10px auto;
        text-align: center;
    }

    .movie input {
        width: 150px;
        height: 20px;
    }

    .movie select {
        width: 150px;
        height: 20px;
    }

    #sum {
        margin: 0px auto;
        text-align: center;
    }

    #sum button {
        text-align: center;
        display: inline-block;
        background-image: linear-gradient(#ddd, #bbb);
        border: 1px solid rgba(0, 0, 0, .2);
        background-image: linear-gradient(#fbb2d0, #e779aa);
    }

    .showInfo {
        width: 100%;
        /* 设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示 */
        border-collapse: collapse;
    }

    .showInfo td,
    th {
        border: 1px solid black;
        text-align: center;
    }
</style>

<body>
    <form id="myform" name="myform" method="post" action="exam.html" οnsubmit="return rececive()">
        <table class="movie">
            <tr>