js原生语法实现表格操作
HTML页面：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<script src="jquery.js"></script>
<script src="1.js" type="text/javascript" charset="utf-8"></script>
<script src="layer.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="layer.css"/>
</head>
<body>
<table class="table table-hover table-bordered" id="mytable" style="width: 100%;;">
<thead>
<tr style="width: 100%;">
<th>选中</th>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>生日</th>
<th>地址</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" onclick="checkAll(this)"/></td>
<td colspan="6"><a href="javascript:;" class="btn btn-danger" role="button" onclick="delAll(this)">全部删除</a></td>
</tr>
</thead>
<tbody id="listTable" style="width: 100%;">
<tr>
<td><input type="checkbox" name="item" /></td>
<td>100806131234</td>
<td>劈日e斩月</td>
<td>123456</td>
<td>1995-08-07</td>
<td>北京市朝阳区艾欧尼亚</td>
<td>
<input type="button" name="" value="删除" class="btn btn-danger" onclick="del(this)" />
<input type="button" name="" value="修改" class="btn btn-info" onclick="modify(this)" />
</td>
</tr>
</tbody>
</table>
<h1>新增数据</h1>
<form>
<table class="table table-hover table-bordered">
<tr>
<th>编号</th>
<td><input type="text" name="" class="form-control" id="num" /></td>
</tr>
<tr>
<th>姓名</th>
<td><input type="text" name="" class="form-control" id="username" /></td>
</tr>
<tr>
<th>密码</th>
<td><input type="password" name="" class="form-control" id="pwd" /></td>
</tr>
<tr>
<th>生日</th>
<td><input type="date" name="" class="form-control" id="birth" /></td>
</tr>
<tr>
<th>地址</th>
<td><input type="text" name="" class="form-control" id="addre" /></td>
</tr>
<tr>
<td colspan="2">
<input type="reset" value="重置" class="btn btn-primary" id="reset" />
<input type="button" value="添加" class="btn btn-success" id="add" onclick="addList()" />
<input type="button" value="更新" class="btn btn-info" id="" onclick="update()" />
</td>
</tr>
</table>
</form>
</body>
</html>
JS文件：
//添加数据
function addList(){
var oNum=document.getElementById('num').value;
var oUser=document.getElementById('username').value;
var oPwd=document.getElementById('pwd').value;
var oBirth=document.getElementById('birth').value;
var oAddre=document.getElementById('addre').value;
console.log(oNum);
console.log(oUser);
console.log(oPwd);
console.log(oBirth);
console.log(oAddre);
// 创建tr标签
var oTr=document.createElement('tr'); var oTd1=document.createElement('td');
var oInput=document.createElement('input');
//将input标签添加到td上
oTd1.appendChild(oInput);
//给input设置属性为checkbox
oInput.setAttribute('type','checkbox');
oInput.setAttribute('name','item'); var oTd2=document.createElement('td');
oTd2.innerHTML=oNum;
var oTd3=document.createElement('td');
oTd3.innerHTML=oUser;
var oTd4=document.createElement('td');
oTd4.innerHTML=oPwd;
var oTd5=document.createElement('td');
oTd5.innerHTML=oBirth;
var oTd6=document.createElement('td');
oTd6.innerHTML=oAddre; var oTd7=document.createElement('td');
var oInput2=document.createElement('input');
var oInput3=document.createElement('input'); oInput2.setAttribute('type','button');
oInput2.setAttribute('value','删除');
oInput2.setAttribute('onclick','del(this)');
oInput2.className='btn btn-danger';
oInput3.setAttribute('type','button');
oInput3.setAttribute('value','修改');
oInput3.setAttribute('onclick','modify(this)');
oInput3.className='btn btn-info';
oTd7.appendChild(oInput2);
oTd7.appendChild(oInput3);
oTr.appendChild(oTd1);
oTr.appendChild(oTd2);
oTr.appendChild(oTd3);
oTr.appendChild(oTd4);
oTr.appendChild(oTd5);
oTr.appendChild(oTd6);
oTr.appendChild(oTd7);
var olistTable=document.getElementById('listTable');
olistTable.appendChild(oTr);
layer.msg('添加节点成功');
}
//单点对应删除
function del(obj){
var oParentnode= obj.parentNode.parentNode;
console.log(oParentnode);
var olistTable=document.getElementById('listTable');
//删除olistTable下的一个的子节点
olistTable.removeChild(oParentnode);
layer.msg('删除单项成功');
} //多项删除(全部删除) 需要checkAll方法与delAll方法
function checkAll(c){
var status = c.checked;
var oItems = document.getElementsByName('item');
for (var i=0;i<oItems.length;i++) {
oItems[i].checked =status;
}
}
//delAll功能
function delAll(){
var olistTable = document.getElementById('listTable');
var items = document.getElementsByName('item');
for (var j=0;j<items.length;j++) {
//如果item被选中
if (items[j].checked) {
var oParentnode = items[j].parentNode.parentNode;
olistTable.removeChild(oParentnode);
j--;
}
}
layer.msg('删除多项成功');
} //修改功能
function modify(obj){
var oNum=document.getElementById('num');
var oUser=document.getElementById('username');
var oPwd=document.getElementById('pwd');
var oBirth=document.getElementById('birth');
var oAddre=document.getElementById('addre');
console.log(oNum);
console.log(oUser);
console.log(oPwd);
console.log(oBirth);
console.log(oAddre);
//获取到父节点
var oTr=obj.parentNode.parentNode;
console.log(oTr);
//获取到该行数据
var aTd=oTr.getElementsByTagName('td');
console.log(aTd);
rowIndex=obj.parentNode.parentNode.rowIndex;
console.log(rowIndex);
oNum.value = aTd[1].innerHTML;
oUser.value = aTd[2].innerHTML;
oPwd.value = aTd[3].innerHTML;
oBirth.value = aTd[4].innerHTML;
oAddre.value = aTd[5].innerHTML;
console.log(oNum.value);
console.log(oUser.value);
console.log(oPwd.value);
console.log(oBirth.value);
console.log(oAddre.value);
//console.log(aTd[5].innerHTML);
} //更新功能
function update(){
var oNum = document.getElementById('num');
var oUser = document.getElementById('username');
var oPwd = document.getElementById('pwd');
var oBirth = document.getElementById('birth');
var oAddre = document.getElementById('addre');
console.log(oNum);
console.log(oUser);
console.log(oPwd);
console.log(oBirth);
console.log(oAddre);
var oMytable = document.getElementById('mytable');
console.log(oMytable);
console.log(oMytable.rows[rowIndex].cells);
oMytable.rows[rowIndex].cells[1].innerHTML=oNum.value;
oMytable.rows[rowIndex].cells[2].innerHTML=oUser.value;
oMytable.rows[rowIndex].cells[3].innerHTML=oPwd.value;
oMytable.rows[rowIndex].cells[4].innerHTML=oBirth.value;
oMytable.rows[rowIndex].cells[5].innerHTML=oAddre.value;
layer.msg('更新成功');
}
js原生语法实现表格操作的更多相关文章
- js原生动态创建表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）
js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...
- js 表格操作----添加删除
js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...
- 网站开发进阶(二十五)js如何将html表格导出为excel文件
js如何将html表格导出为excel文件 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...
- 新知识：JQuery语法基础与操作
jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...
- 在Node.js使用Promise的方式操作Mysql（续）
在之后的开发中,为了做一些事务开发,我把mysql的连接代码从之前的query函数中分离出来了,直接使用原生的方法进行操作,但发现还是有点问题 原因是原生的node-mysql采用了回调函数的方式,同 ...
- JS高级语法与JS选择器
元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- python 问答
1.list和tuple有什么区别? list是可变的,可以添加list.append,可以插入list.insert,可以改变元素值list[2] ='a':而tuple在初始化的时候就确定了,不能 ...
- T-SQL行合并成列与列拆分成行
本文出处:http://www.cnblogs.com/wy123/p/6910468.html 感觉最近sql也没少写,突然有一点生疏了,对于用的不是太频繁的一些操作,时间一久就容易生. 多行的某一 ...
- 1.Tomcat配置.md
1.启动 解压缩安装包后,点击startup.bat,保持控制台窗口开启 浏览器中输入http://localhost:8080 后看到启动界面则表示启动成功 点击shutdown.bat则关闭Tom ...
- @JsonInclude注解，RestTemplate传输值为null的属性，利用FastJson将属性中有空值null的对象转化成Json字符串
一个pojo类: import lombok.Data; @Data public class Friend { private String name; private int age; priva ...
- spring-boot-starter-data-elasticsearch 整合elasticsearch 5.x详解
1.使用原因 近期公司在开发新的项目用到了elasticsearch ,因为项目框架用的spring Cloud所以依赖全用的是starter,从网上找的信息比较旧,并没有整合elasticsearc ...
- python+爬虫+签名
在公众号,看到一个比较好玩的程序.它使用post的来传送请求,以前没有遇到过.可能是自己,写的程序太少了.查了一下post的用法: 通常,你想要发送一些编码为表单形式的数据——非常像一个 HTML 表 ...
- 关于log4j:WARN No appenders could be found for logger (org.apache.hadoop.metrics2.lib.MutableMetricsFactory).的问题
解决办法(非长久之计,折中) 将该方法插入到main函数中,可以自行打印日志信息了 BasicConfigurator.configure(); //自动快速地使用缺省Log4j环境.原文链接:htt ...
- msf客户端渗透（二）：PDF漏洞、恶意网站、flash漏洞、IE漏洞、java漏洞、android漏洞、VBScript感染payload
这个漏洞利用只在XP上有效 利用pdf漏洞利用payload exploit生成一个pdf文件 传到被攻击机上 启动msf侦听 exploit -j XP上双击运行这个pdf时,kali获取到一个sh ...
- CentOS 安装Oracle
转自----------------https://www.cnblogs.com/startnow/p/7580865.html 环境:VM12+centos7 x86_64 minimal - 最 ...
- 测试--错误java.lang.Exception: No tests found matching [{ExactMatcher:fDisplayName=select], {ExactMatcher:fDisplayName=select(com.rjj.demo.DemoApplicationTests)]...
异常这个错误java.lang.Exception: No tests found matching [{ExactMatcher:fDisplayName=select], {ExactMatche ...