需求描述：

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

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

步骤：

  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. ZAO 换脸不安全？用 python 轻松实现 AI

    最近两天一款名为 「ZAO」 的 App 刷爆了朋友圈,它的主打功能是 AI 换脸,宣称「只需一张照片,就能出演天下好戏」 : 现实中不能实现当明星的梦,在这个 App 里你可以,想演谁演谁.新鲜.好 ...

  2. Numpy的进阶学习

    前言: 在学习cs231n编写课后作业代码过程中 .发现自己对计算的向量化vectorized不是很懂,编写不出代码.对numpy的库也只是停留在表面 Numpy Numpy学习库链接 1.numpy ...

  3. [python]多元赋值

    1. 简介 将多个变量同时赋值的方法,称为多元赋值. 2. 示例一: x, y, z = 1, 2, 'a string' print x, y, z 运行结果: 1 2 a string

  4. codeforces 830 B. Cards Sorting（线段树）

    题目链接:http://codeforces.com/contest/830/problem/B 题解:其实这题就是求当前大小的数到下一个大小的数直接有多少个数,这时候可以利用数据结构来查询它们之间有 ...

  5. codeforces 799 C. Fountains（二分+思维）

    题目链接:http://codeforces.com/contest/799/problem/C 题意:要求造2座fountains,可以用钻石,也可以用硬币来造,但是能用的钻石有限,硬币也有限,问能 ...

  6. CVE-2019-0708远程桌面代码执行漏洞复现

    漏洞环境 使用VMware 安装Windows7 SP1模拟受害机 利用 攻击工具准备 1.使用如下命令一键更新安装的metasploit框架 curl https://raw.githubuserc ...

  7. SecureCRT安装及破解

    ### SecureCRT简介  > SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单地说是Windows下登录UNIX或Linux服务器主机的软件. > &g ...

  8. 章节十六、7-DataProviders

    一.当我们的同一个test有多套数据需要进行测试,那么我们就需要用到-->DataProviders package testclasses1; import org.testng.annota ...

  9. elementUI树状图竖向滚动条和横向滚动条问题

    添加样式: <div class="device-tree"> <el-scrollbar style="height:100%"> & ...

  10. PHP如何解决表单重复提交

    利用session   表单隐藏域中存放session(表单被请求时生成的标记).采用此方法在接收表单数据后,检查此标志值是否存在,先进行删除,然后处理数据; 若不存在,说明已提交过,忽略本次提交. ...