需求描述：

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

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

步骤：

  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的更多相关文章

  1. ASP.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文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.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. #网页中动态嵌入PDF文件/在线预览PDF内容#

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

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

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

  8. 在网页中预览excel表格文件

    项目需求在前端页面中实现预览excel表格的功能,上网了解之后大致总结为一下几种方法. 1.office文档转换为pdf,再转swf,然后通过网页加载flash进行预览 2.通过 xlsx.js,js ...

  9. 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 ...

随机推荐

  1. （五十五）c#Winform自定义控件-管道

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...

  2. Java8 日期 API 业务使用

    最近在做账单结算业务,需要根据客户选择的结算方式来推算下一次结算日期以及该次结算日期段. 推算日期这样的业务直男君以前就写过,只不过使用的是熟悉的 java.util.date 和 java.util ...

  3. 2019牛客暑期多校训练营（第二场） - J - Go on Strike! - 前缀和预处理

    题目链接:https://ac.nowcoder.com/acm/contest/882/C 来自:山东大学FST_stay_night的的题解,加入一些注释帮助理解神仙代码. 好像题解被套了一次又一 ...

  4. [NOI2009]诗人小G 四边形优化DP

    题目传送门 f[i] = min(f[j] + val(i,j); 其中val(i,j) 满足 四边形dp策略. 代码: #include<bits/stdc++.h> using nam ...

  5. CodeForces Round#480 div3 第2场

    这次div3比上次多一道, 也加了半小时, 说区分不出1600以上的水平.(我也不清楚). A. Remove Duplicates 题意:给你一个数组,删除这个数组中相同的元素, 并且保留右边的元素 ...

  6. codeforces 808 D. Array Division（二分）

    题目链接:http://codeforces.com/contest/808/problem/D 题意:有一串长度为n的数组,要求选择一个数字交换它的位置使得这串数能够分成两串连续的和一样的数组. 这 ...

  7. lightoj 1030-B - Discovering Gold （概率dp）

    题意:有一个直线的金矿,每个点有一定数量的金子:你从0开始,每次扔个骰子,扔出几点就走几步, 然后把那个点的金子拿走:如果扔出的骰子超出了金矿,就重新扔,知道你站在最后一个点:问拿走金 子的期望值是多 ...

  8. poj 3169 Layout（差分约束+spfa）

    题目链接:http://poj.org/problem?id=3169 题意:n头牛编号为1到n,按照编号的顺序排成一列,每两头牛的之间的距离 >= 0.这些牛的距离存在着一些约束关系:1.有m ...

  9. 面向对象程序设计（Java） 第1周学习指导及要求

    面向对象程序设计(Java)第1周学习指导及要求 (2019.8.30-2019.9.2)   学习目标 了解课程上课方式及老师教学要求,掌握课程学习必要的软件工具: 理解JVM.JRE与JDK等概念 ...

  10. Spring Boot 多环境如何配置

    Spring Boot 开发环境.测试环境.预生产环境.生产环境多环境配置 通常一个公司的应程序可能在开发环境(dev).测试环境(test).生产环境(prod)中运行.那么是不是需要拷贝不同的安装 ...