需求描述：

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

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

步骤：

  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. mysql类似oracle rownum写法

    rownum是oracle才有的写法,rownum在oracle中可以用于取第一条数据,或者批量写数据时限定批量写的数量等 mysql取第一条数据写法 SELECT * FROM t order by ...

  2. Eclipse批量注释、批量缩进、批量取消缩进技巧

    1.批量注释:选中若干行,按"Ctrl"+"/" 2.批量缩进:选中若干行,按TAB 3.批量取消缩进:选中若干行,按SHIFT+TAB

  3. B-generator 1_2019牛客暑期多校训练营（第五场）

    题意 给出\(x0,x1,a,b\), \(x_i = a\cdot x_{i-1} + b\cdot x_{i-2}\),问\(x_n取模mod\) 题解 用十进制快速幂,二进制快速幂是每到下一位就 ...

  4. ACM-ICPC 2018 沈阳赛区(网络赛)

    D.Made In Heaven One day in the jail, F·F invites Jolyne Kujo (JOJO in brief) to play tennis with he ...

  5. hdu 5898 odd-even number(数位dp）

    Problem Description For a number,if the length of continuous odd digits is even and the length of co ...

  6. CodeM 资格赛 B 可乐 思维

      分析: 我们假设购买一种可乐p瓶,我们可以得到期望:p*(m/n*a[i]+(n-m)/n*b[i]),由这个式子我们可以看出唯一的变量是i,所以可以遍历i找出式子的最大值 #include &l ...

  7. codeforces 789 C. Functions again（dp求区间和最大）

    题目链接:http://codeforces.com/contest/789/problem/C 题意:就是给出一个公式 然后给出一串数求一个区间使得f(l,r)最大. 这题需要一个小小的处理 可以设 ...

  8. JS千分位格式化方法,以及多种方法性能比较

    方法一字符串版 function toThousands(num) { var result = '', counter = 0; num = (num || 0).toString(); for ( ...

  9. AOE工程实践-NCNN组件

    作者:杨科 NCNN是腾讯开源的一个为手机端极致优化的高性能神经网络前向计算框架.在AOE开源工程里,我们提供了NCNN组件,下面我们以SqueezeNet物体识别这个Sample为例,来讲一讲NCN ...

  10. 【Nginx】基于Consul+Upsync+Nginx实现动态负载均衡

    一.Http动态负载均衡 什么是动态负载均衡 动态负载均衡实现方案 常用服务器注册与发现框架 二.Consul快速入门 Consul环境搭建 三.nginx-upsync-module nginx-u ...