js-DOM-动态表格练习

最新推荐文章于 2023-12-22 16:20:30 发布

承北风

最新推荐文章于 2023-12-22 16:20:30 发布

阅读量292

点赞数

分类专栏：笔记日常学习文章标签： javascript html

本文链接：https://blog.csdn.net/qq_33755492/article/details/118097164

版权

这篇博客介绍了如何使用JavaScript实现DOM动态表格操作，包括让用户自由添加和删除表格数据。文章提到了两种方法，一种基于面向对象的实现，另一种则未详细说明，同时提供了操作效果的展示。

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

用户可以任意添加表格数据，删除表格数据

第一种方法：面向对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table{
            border: 1px solid ;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
div{
    text-align: center;
    margin: 50px;
}


    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入名字">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" id="btn" value="添加">


</div>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>白金</td>
        <td>女</td>
        <td><a href=

最低0.47元/天解锁文章

承北风

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js-DOM-动态表格练习

用户可以任意添加表格数据，删除表格数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid ; margin: auto; widt
复制链接

扫一扫