js 添加表格案例

前端小臂猿

于 2021-12-18 20:53:11 发布

阅读量268

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_64337756/article/details/122016837

版权

本文将介绍如何利用JavaScript在网页上动态生成表格，包括创建表格元素、填充数据以及操作DOM进行动态更新。通过实例代码解析，帮助前端开发者掌握JavaScript在HTML表格操作中的应用。

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

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #form {
            width: 480px;
            margin: 30px auto;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px;
            line-height: 30px;
            position: relative;
        }

        button {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        #tab {
            width: 500px;
            margin: 30px auto;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 5px;
        }

        tbody tr td:first-child {
            text-align: center;
        }

        /*input[type]  属性选择器  选择input标签，并且有type属性input标签*/
        /*input[type = "checkbox"]  选择有type属性并且值为checkbox的input标签*/
        input[type="checkbox"] {
            width: 15px;
            height: 15px;
        }

        #div1 {
            position: relative;
            width: 480px;
            padding: 10px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="form">
        请输入姓名: <input type="text" id="name"> <br>

最低0.47元/天解锁文章

前端小臂猿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 添加表格案例

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #form { width: 480px; margin: 30px auto; border: 1px solid #eee; .
复制链接

扫一扫