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"> ...

随机推荐

Hibernate 再接触树状结构设计以及学生课程成绩表的设计
1 树状结构的设计 package com.bjsxt.hibernate; import java.util.HashSet; import java.util.Set; import javax. ...
django select_related()和反射结合
对于有外键关联的表,select_related()会自动进行多变关联; ret = models.UserInfo.objects.all().select_related() print ret. ...
关于servlet转发和重新定向
1:重新定向, 是sendRdix(记忆关键词R),firbug中的请求是两个 2:转发是dispt,(记忆关键词是F),firbug中的请求时一个
css3的2D和3D的转换
一:2D转换: 通过 CSS3 transform转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移 ...
C++ 网络编程总结
第一次用C++写程序,对C++ 只是菜鸟级别的,倒是对C#很熟悉.两者有很大的相似性.但也有不同. 首先写了一个网络通讯用的小的MFC程序.发现 (1)MFC写界面真的好麻烦呀. 用C#写的tab ...
HttpWatch手把手图解教程
HttpWatch手把手图解教程,提供HttpWatch下载,教您安装使用,一步到位一 HttpWatch下载: HttpWatchProv7.2.13 破解版(带正版key) 授权:共享软件大小 ...
C# WCF初识
原文:http://www.cnblogs.com/artech/archive/2007/02/26/656901.html 方式1: 需引用 System.ServiceModel namespa ...
Kubernetes+Prometheus+Grafana部署笔记
一.基础概念 1.1 基础概念 Kubernetes(通常写成“k8s”)Kubernetes是Google开源的容器集群管理系统.其设计目标是在主机集群之间提供一个能够自动化部署.可拓展.应用容器可 ...
Canvas 绘画
一.Canvas 应用场景 1.游戏 2.图表 3.动画 4.codepen.io (HTML5 动效) 最早二.Canvas 发展历史 1.最早在apple的safari 1.3中引入 2.ie ...
JAVA回文
package huiwen; import java.util.Scanner; public class Huiwen { public static void main(String[] arg ...

js原生语法实现表格操作

js原生语法实现表格操作的更多相关文章

随机推荐

热门专题