在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

时间：2022-09-07 19:33:56
需求描述：

   用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示，具体表现如下图：

  如果如果输入框内容有一项为空，弹出对话框‘请将数据填入完全

在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

步骤：

  1.按钮注册单击事件

  2.获取并判断文本框的内容

  4.创建行并添加到tbody中

  5.创建列，并设置内容

  6.把列添加到行中

代码：
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>在网页中添加表格</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

          div {

              width: 400px;

              margin: 100px auto;

          }

         table {

             margin-top: 10px;

             width: 400px;

             border: 2px solid #000;

             border-collapse: collapse;

         }

         table thead tr {

             background-color: purple;

             color: #e0e0e0;

         }

         table tr {

             background-color: pink;

         }

         table td {

             text-align: center;

             border:1px solid #000 ;

         }

         table td:nth-child(1){

             width: 100px;

         }

         table td:nth-child(2){

             width: 300px;

         }

     </style>

 </head>

 <body>

 <div>

     <label for="">请输入姓名：</label>

     <input type="text" class="uname"><br />

     <label for="">请输入邮箱：</label>

     <input type="email" class="email"><br />

     <button>添加</button><br />

     <table>

         <thead>

         <tr>

             <td>姓名</td>

             <td>邮箱</td>

         </tr>

         </thead>

         <tbody>

             <!--    动态添加内容  -->

         </tbody>

     </table>

 </div>

 <script>

     // 获取元素

     var uname = document.querySelector('.uname');

     var email = document.querySelector('.email');

     var btn = document.querySelector('button');

     var tbody = document.querySelector('tbody');

     btn.onclick =function () {

         //检测输入的内容不为空

         if(uname.value === '' || email.value === '')

             alert('请输入内容');

         else {

             //创建节点

             var tr = document.createElement('tr');

             var td1 = document.createElement('td');

             var td2 = document.createElement('td');

             //获取元素内容

             td1.innerHTML = uname.value;

             td2.innerHTML = email.value;

             //添加内容到表格中

             tr.append(td1);

             tr.append(td2);

             tbody.append(tr);

         }

     }

 </script>

 </body>

 </html>

效果：

现在输入：name: 小明 　　--> 点击添加按钮添加

在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript的更多相关文章

  1. ASP&period;NET中Literal控件的使用方法（用于向网页中动态添加内容）

    原文:https://www.jb51.net/article/82855.htm 可以将 Literal 控件用作网页上其他内容的容器.Literal 控件最常用于向网页中动态添加内容.简单的讲,就 ...

  2. Web网页中动态数据区域的识别与抽取 Dynamical Data Regions Identification and Extraction in Web Pages

    Web网页中动态数据区域的识别与抽取 Dynamical Data Regions Identification and Extraction in Web Pages Web网页中动态数据区域的识别 ...

  3. 网页中动态嵌入PDF文件&sol;在线预览PDF内容https&colon;&sol;&sol;www&period;cnblogs&period;com&sol;xgyy&sol;p&sol;6119459&period;html

    #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...

  4. JS事件 什么是事件？JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...

  5. 利用jquery表格添加一行并在每行第一列大写字母显示实现方法

    表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...

  6. &num;网页中动态嵌入PDF文件&sol;在线预览PDF内容&num;

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  7. 使用js为表格添加一行

    今天同事问了我一个问题,为表格添加新的行,我用的js写了一下,代码如下: <!DOCTYPE html> <html> <head> <meta charse ...

  8. CAD在网页中打印的图纸里面添加页眉及页脚

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  9. &lbrack;转&rsqb;UTF-8网页中的头部部分多出一行空白

    最近做php开发,我自己的习惯都是用utf-8编码,有时候却在网页顶部多了一个空白行,甚至引起了式样的错乱,后来google到这么一篇文 章,彻底解决问题UTF-8的BOM问题通常情况下,使用Wind ...

随机推荐

  1. linux学习笔记1

    2016年09月25日 unix与linux发展史 unix是linux之父,学习linux后能容易上手unix. linux是源码开放的unix,由一位芬兰大学生李纳斯在网络上发起,和后来众多爱好者 ...

  2. 百度之星资格赛，hdu 4825 XOR SUM

    显然是要建一棵0.1树 事实上非常easy就是二叉树,仅仅只是为了操作简便,即程序的速度,所以就採用静态树,即不动态分配内存,使用较大的全局数组.0是根节点 #include<cstdio&gt ...

  3. 【Maven实战】Maven开发环境的搭建和案例展示

    1.首先到www.apache.org中下载maven,得到一个apache-maven-3.1.0-bin.zip的压缩包. 2.将此压缩包解压,这里解压到D:\docs中,然后找到maven的bi ...

  4. 九宫格问题 A&ast;

    八数码问题 一.八数码问题八数码问题也称为九宫问题.在3×3的棋盘,摆有八个棋子,每个棋子上标有1至8的某一数字,不同棋子上标的数字不相同.棋盘上还有一个空格,与空格相邻的棋子可以移到空格中.要求解决 ...

  5. EJB相关的面试题

    1.EJB是基于哪些技术实现的?并说出SessionBean和EntityBean的区别,StatefulBean和StatelessBean的区别. (1)EJB包括Session Bean.Ent ...

  6. arcgis api 4&period;x for js 结合 react 入门开发系列&quot&semi;esri-loader&quot&semi;篇（附源码下载）

    基于上篇的介绍,虽然有比较esri-loader.@arcgis/webpack-plugin,还是觉得有必要需要讲述一下“esri-loader”的开发模式,待大家体验后也会有更直观的感受.本篇文章 ...

  7. HashMap扩容全过程

      1.如果HashMap的大小超过了负载因子(load factor)定义的容量,怎么办? 默认的负载因子大小为0.75,也就是说,当一个map填满了75%的bucket时候,和其它集合类(如Arr ...

  8. const与&num;define相比有什么不同？

    C++语言可以用const定义常量,也可以用#define定义常量,但是前者比后者有更多的优点:● const常量有数据类型,而宏常量没有数据类型.编译器可以对前者进行类型安全检查,而对后者只进行字符 ...

  9. 在Mac下连接阿里云服务器

    1.登录 ssh root@IP地址 eg:00.00.00.00 2.新建用户 useradd -d /home/用户名 -m 根目录名 (这条命令,就是创建一个新用户,并给该用户在home目录下创 ...

  10. iOS开发之duplicate symbols for architecture x86&lowbar;64错误

    [主要内容:] 1. 错误提示 2. 分析错误原因 3. 解决问题办法 一.错误提示   在我们写代码过程中可能会经常遇到这样一个错误: <span style="font-size: ...

相关文章