表格内容添加(js)

使用js对表格进行内容的增加

效果图
实现功能
1.元素布局
2.css设置样式
3.js部分实现功能

效果图

实现功能

1.通过表单增加内容；
2.判断邮箱格式；
3.清空输入框

话不多说，直接上代码

1.元素布局

<div id="dv">姓名:<input type="text"  id="uname" placeholder="请输入姓名"/><br />邮箱:<input type="email"  id="email" placeholder="请输入邮箱"/></div><input type="button" value="添加" id="btn" /><input type="reset" id="btn1"/><table border="1" cellpadding="0" cellspacing="0" id="tb"><thead><tr><th>姓名</th><th>邮箱</th></tr></thead><tbody id="tbd"><tr><td>小黑</td><td>xiaohei@126.com</td></tr></tbody></table>

2.css设置样式

<style>table {width: 600px;cursor: pointer;}table td {text-align: center;}table th {background-color: rgb(119, 243, 126);}table tr {background-color: rgb(233, 225, 227);}#uname,#email{width: 150px;height: 18px;margin: 5px 0 5px 2px;border: 1px solid #02cca0;border-radius: 4px;}#btn,#btn1 {width: 60px;height: 30px;margin: 3px 5px 20px 28px;}#btn:hover{cursor: pointer;background: rgb(41, 113, 219);}#btn1:hover{cursor: pointer;background:rgb(184, 184, 79);}
</style>

3.js部分实现功能

<script>// 1.获取对象var userName = document.querySelector('#uname');var userEmail = document.querySelector('#email');var btn = document.querySelector('#btn');//2. 查找添加标签位置var tbody= document.getElementById('tbd');btn.onclick = function(){if(userName.value =="" ||userName.value==null || userEmail.value =="" || userEmail.value==null){alert("请将数据完全填写后再提交");}else if(userEmail.value.indexOf("@") == -1 || userEmail.value.indexOf(".") == -1){// 这里只进行了简单的邮箱格式判断，正式运用时建议使用正则表达式alert("请输入正确的邮箱格式");}else{// 1.创建存储输入值的两个td，并通过innerHTML函数将输入数据回显var newName=document.createElement('td');newName.innerHTML = userName.value;var newEmail=document.createElement('td');newEmail.innerHTML = userEmail.value;// 2.先在tbody内添加一个trvar newTr=document.createElement('tr');tbody.appendChild(newTr);// 3.再通过新增的tr，将两个td添加到表格内newTr.appendChild(newName);newTr.appendChild(newEmail);// 4.清空输入框userName.value='';userEmail.value='';}}// 手动重置按钮var reset= document.querySelector('#btn1');reset.onclick=function() {userName.value='';userEmail.value='';}

到这里就结束了，一个简单的js小案例，希望能对大家有所帮助。
这里是万物之恋！我们下次再见了。

表格内容添加(js)相关推荐

VUE element-ui之table表格内容添加千位分割符/货币格式
步骤: 定义转换方法 <el-table-column prop="regDayToNow" label="距离注册时间(天)" width=" ...
表格内容排序(js实现)
http://tablesorter.com/docs/ 转载于:https://www.cnblogs.com/sunflower627/p/4718688.html
【Vue.JS】Vue.JS 表格内容排序组件，Render函数的使用
声明:文中代码整体思路来源于梁灏编著的 [Vue.JS 实战]一书,学习过程中因觉得该组件效果不错,比较实用,所以记录一份并做了详细的注释以供学习效果图代码 index.html <!D ...
vue+elementui系统利用Export2Excel.js将表格内容导出到excel，并设置表头文字水平垂直居中
写在前面:这是纯前端导出,导出的表格是二级表头,内容是四级单元格(单元格内有四小格),这几个点学会之后应该能适应大部分导出excel的需求了.本次功能记录真实有效.对于之前没接触过导出excel需求的 ...
mysql表格的代码_mySQL表格内容用代码添加
通过代码对表格内容操作: 1.添加数据 insert into Info values('p009','张三',1,'n001','2016-8-30 12:9:8') ; 给特定的列添加数据 ins ...
用JS制作表格的添加删除
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士目的就是锻炼操作DOM.先写一下html的布局. 姓名:<input type="text"> 年龄:& ...
Java向pdf模板中写入数据并在模板之后添加新的表格内容
场景:我们经常会需要用代码生成pdf文件,涉及到复杂的内容也可以选用先自己制作pdf模板,再用代码去读取,动态数据部分的内容无法用模板实现的就要用Java代码去实现需求:生成如下的pdf 实现思路: ...
C# mvc for循环添加表格内容
HTML: //提取单据事件 function Draw(record) {//record:bsgrid里的参数 var DanJu = record.JinHuoDanID1;//获取进货单if ...
JS向表格里添加数据
题目: 1) 定义一个Student对象, 该对象有sname.age.sex.nickname.hobby几个属性 2) 构建数据,将班里所有学生的信息创建成对应的Student对象, 并将这些St ...

表格内容添加(js)

使用js对表格进行内容的增加

效果图

实现功能

1.元素布局

2.css设置样式

3.js部分实现功能

表格内容添加(js)相关推荐

最新文章

热门文章