需求描述：

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

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

步骤：

  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. JavaScript Array 数组方法汇总

    JavaScript Array 数组方法汇总 1. arr.push() 从后面添加元素,返回值为添加完后的数组的长度 var arr = [1,2,3,4,5] console.log(arr.p ...

  2. 传入值参数&传入引用参数的区别

    传值&传引用 1.传值 是把实参的值赋值给行参 那么对行参的修改,不会影响实参的值 2.传地址 是传值的一种特殊方式,只是他传递的是地址 那么传地址以后,实参和行参都指向同一个对象 3.传引用 ...

  3. CF #535 (Div. 3) E2 Array and Segments (Hard version) 利用线段树进行区间转移

    传送门 题意:    有m个区间,n个a[ i ] , 选择若干个区间,使得整个数组中的最大值和最小值的差值最小.n<=1e5,m<=300; 思路: 可以知道每个i,如果一个区间包含这个 ...

  4. codeforces 876 F. High Cry（思维）

    题目链接:http://codeforces.com/contest/876/problem/F 题解:一道简单的思维题,知道最多一共有n*(n+1)/2种组合,不用直接找答案直接用总的组合数减去不符 ...

  5. codeforces 284 D. Cow Program（记忆化搜索）

    题目链接:http://codeforces.com/contest/284/problem/D 题意:给出n个数,奇数次操作x,y都加上a[x],偶数次操作y加上a[x],x减去a[x],走出了范围 ...

  6. mysql 主主从配置

    配置主服务器:主服务器1 Ip:  192.168.0.1 主服务器2 Ip:  192.168.0.2 主服务器1配置 2.1.修改mysql配置文件 vim /etc/my.conf Server ...

  7. HTTPS加密协议

    使用JDK自带的keytool工具生成一个证书(keystore文件),其中包含了密钥. a.在命令行输入以下命令:keytool -genkey -alias tbb -keyalg RSA -ke ...

  8. spring 事务配置方式以及事务的传播性、隔离级别

    在前面的文章中总结了spring事务的5中配置方式,但是很多方式都不用而且当时的配置使用的所有参数都是默认的参数,这篇文章就看常用的两种事务配置方式并信息配置事务的传播性.隔离级别.以及超时等问题,废 ...

  9. nodejs实现聊天机器人

    技术栈 服务端: koa.koa-route.koa-websocket.request. 客户端: html.css.js.websocket. 远程聊天API: http://api.qingyu ...

  10. 在C#一个程序中，将一个窗体中的数据传送到另一个窗体

    使用多个窗体搭建的程序,需要用到窗体间的数据传递,常用两种方法: 方法一 1,进入子窗体的Designer.cs,将子窗体中的私有控件控件定义为public 2.在主窗口程序Form1.cs中将子窗口 ...