文档章节

javascript 动态编辑表格

huangyanxiong
 huangyanxiong
发布于 2015/01/14 10:55
字数 1746
阅读 72
收藏 5
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>练习</title>
</head>
<style type="text/css">
    .user{
        color: #DFDFDF;
    }
    table {
    border: 1px solid black;
    /*修正单元格之间的边框不能合并*/
    border-collapse: collapse;
    width:600px;
    }
    table td {
        border: 1px solid black;
        width: 25%;
    }
    table th {
        border: 1px solid black;
        width: 25%;
    }
    tbody th {
        background-color: #A3BAE9;
    }
</style>
<body>
    <div>
    <form name="form1" id="form1">
        username:<input type="text" id="username" name='user'  onchange="checkUser(this)" value="5-15数字或者字母组成" onfocus="clearUser(this)" class="user" act="huang">
        mail:<input type="text" id="mail" name="user" onchange="checkMail(this)" onfocus="clearMail(this)" value="电子邮件/Email" class="user">
        phone:<input type="text" id="phone" name="user" onchange="checkPhone(this)" onfocus="clearPhone(this)" value="电话号码/手机号码/Phone" class="user">
        <input type="button" value="添加" id="add" disabled="disabled">
    </form>
    </div>
    <div style="margin-top:50px;">
        <table  id="table">
            <tr>
                <th align="center" >username</th>
                <th align="center" >mail</th>
                <th align="center" >phone</th>
                <th align="center" >操作</th>
            </tr>
                <tr style="background-color: rgb(236, 233, 216);">
                <td align="center" style="width:100px;" ondblclick="edituserValue(this)">huang</td>
                <td align="center" style="width:100px;" ondblclick="edituserValue(this)">huang@qq.com</td>
                <td align="center" style="width:100px;" ondblclick="edituserValue(this)">12345678912</td>
                <td align="center" name="abs">
                    <input type="button" value="删除"                     <input type="button" value="编辑"                 </td>
            </tr>
        </table>
    </div>
</body>
<script type="text/javascript">
        /**
        要善于利用console这个对象对js进行调试  用得比较多的方法  console.info()  可以查看对象,数组等所有类型 console.log()  用来记录参数的变化  这个案例完全兼容ie8
        这个案例的学习要点: 对元素节点 属性节点 文本节点  的增加,删除,替换;正则表达式  面向对象  事件的绑定与触发  对象在事件中的传递  chrome 和firebug 进行调试,对各个对象属性的获取
        创建元素的类
        element html元素 例如li  类型 string
        attr    为该元素设置属性 例如 var attr={style:'width:10px;'} 类型  Array(关联数组)
        textnode 为该元素设置文本节点  类型 string
        return  返回一个完整的该元素
        **/
        function createelement(element,attr,textnode){
            this.element=element;
            this.attr=attr;
            this.textnode=textnode;
            this.createed=null;
            this.createelement=function(){
            this.createed=document.createElement(this.element);
            for (key in attr) {
                this.createed.setAttribute(key,attr[key])
            };
            //由于但标签是没有文本节点的,类似input <br /> 等,暂时没有找到好的办法判断是不是单标签所以就只针对这个项目用得最多的input标签进行判断
            if (this.createed.nodeName !='INPUT') {
                this.createed.appendChild(document.createTextNode(this.textnode));
            };
            return this.createed;
            }
        }
        /**
            用于创建编辑时替换的input
        **/
        function createInput(oldTd){
            //console.info(oldTd);
            var attr={name:'edituser',value:oldTd.childNodes[0].nodeValue,style:'width:'+140+'px;height:'+20+'px;border-width: 0px;'};
            var input=new createelement('input',attr,'');
            return input.createelement();
        }
        /**
            用于创建删除按钮并绑定点击事件
        **/
        function createInputDel(){
            var attr={type:'button',value:'删除'};
            var inputdel=new createelement('input',attr,'');
            var inputDel=inputdel.createelement();
            inputDel.                delTr(this);
            }
            return inputDel;
        }
        /*
            删除一行tr
        */
        function delTr(_this){
            var bool=confirm('你确定要删除吗?');
                if (bool) {
                        _this.parentNode.parentNode.parentNode.removeChild(_this.parentNode.parentNode);
                };
        }
        /*
            对一行表格进行编辑
        */
        function editTr(obj){
            //var this=obj;  //不能重置this
            if (obj.getAttribute('value')=='编辑') {
                    var oldTd=obj.parentNode.previousSibling;
                    var i=1;
                    var editTd=new Array();
                    editTd[0]=oldTd;
                    while(oldTd=oldTd.previousSibling){
                        editTd[i]=oldTd;
                        i=i+1;
                    }
                    //console.info(editTd[1].nodeType);
                    for (var j =0; j < editTd.length; j++) {
                        if (editTd[j].nodeType==1) {
                            editTd[j].appendChild(createInput(editTd[j]));
                            editTd[j].removeChild(editTd[j].childNodes[0]);
                        };
                    };
                    obj.setAttribute('value','保存');
                    return false;
                };
                if (obj.getAttribute('value')=='保存') {
                    var oldTd=obj.parentNode.previousSibling;
                    var i=1;
                    var editTd=new Array();
                    editTd[0]=oldTd;
                    while(oldTd=oldTd.previousSibling){
                        editTd[i]=oldTd;
                        i=i+1;
                    }
                    for (var j = 0; j < editTd.length; j++) {
                        if (editTd[j].nodeType==1) {
                            editTd[j].appendChild(document.createTextNode(editTd[j].childNodes[0].value));    ///这里的val值不能用getAttribute方法获取
                            editTd[j].removeChild(editTd[j].childNodes[0]);
                        };
                    };
                    obj.setAttribute('value','编辑');
                    return false;
                };
            }
              
        /**
            用于创建编辑按钮并绑定点击事件,使得存放用户值的Td可以编辑
        **/
        function createEditInput(){
            var inputEdit=document.createElement('input');
            var attr={type:'button',value:'编辑'};
            var inputedit=new createelement('input',attr,'')
            var inputEdit=inputedit.createelement();
            //在创建元素时就可以绑定事件
            inputEdit.                editTr(this);
            };
            return inputEdit;
        }
        /**
            用于存放删除按钮和编辑按钮的td
        **/
        function createEditTD(tr){
            var editTd=document.createElement('td');
            editTd.setAttribute('align','center');
            editTd.setAttribute('name','abs');
            editTd.appendChild(createInputDel());
            editTd.appendChild(createEditInput());
            tr.appendChild(editTd);      
        }
        /**
            用于创建存放用户值的td,b并且添加到tr中
        **/
        function createUserTd(userarr,td,tr){
            for (var i = 0; i < userarr.length; i++) {
                td[i]=document.createElement('td');
                td[i].setAttribute('align','center');
                td[i].setAttribute('style','width:100px;');
                td[i].setAttribute('ondblclick','edituserValue(this)');
                td[i].appendChild(document.createTextNode(userarr[i].value));
                tr.appendChild(td[i]);
            };
        }
        /**
            用于双击事件进行用户值的编辑
        **/
        function edituserValue(obj){
            if (obj.childNodes[0].nodeType==3) {
                var attr={style:'width:'+(obj.clientWidth-5)+'px;height:'+(obj.clientHeight-5)+'px;border-width: 0px;',value:obj.childNodes[0].nodeValue};
                var Input=new createelement('input',attr,'');
                var input=Input.createelement();
                obj.replaceChild(input,obj.childNodes[0]);  //使用元素节点替换文本节点1
                var val=input.value;
                input.focus();                              //start
                input.value='';                             //   这三行代码可以做到让光标聚焦到input的输入框并且把光标移到最右边
                input.value=val;                            //end
                input.onchange=function(){
                    obj.replaceChild(document.createTextNode(input.value),input);
                }
                input.onblur=function(){
                    obj.replaceChild(document.createTextNode(input.value),input);
                }
            };
        }
        function verificationNull(userarr){
            var error=new Array('用户名不正确','电子邮件不正确','电话号码不正确');
            //var funName=new Array('checkUser','checkMail','checkPhone');
            for (var i = 0; i < userarr.length; i++) {
                if(userarr[i].value){
                    alert(error[i]);
                    return false;
                }
            };
            return true;
        }
        /**
            验证字符串是否由数字和字母的组成的
            value string
            min    num
            max    num
            返回  成立 true 不成立  false
        **/
        function verificationUser(value,min,max){
/*          var min=arguments[1])?arguments[1]:5;       //js 的三元表达式和php 差不多
            var max=arguments[2])?arguments[2]:15;      //加上这两句,可以当作js函数的默认值*/
            var exp=new RegExp('[a-z\d]{'+min+','+max+'}','i');
            return exp.test(value);
        }
        /**
            验证电子邮件
            value string
            返回  成立 true 不成立  false
        **/
        function verificationMail(value){
            var exp=new RegExp('^[a-z0-9]+@[a-z0-9]+\.[a-z]+','i');
            return exp.test(value);
        }
        /**
            验证电子邮件
            value string
            返回  成立 true 不成立  false
        **/
        function  verificationPhone(value){
            var exp=new RegExp('[0-9]{11}');
            //var exp=new RegExp("[\d]{11}");    不知道为什么这样写会错的
            return exp.test(value);
        }
        /**
            验证用户名并且设置输入框的样式
            obj    对象
        **/
        function checkUser(obj){
            if (!verificationUser(obj.value,5,15)) {
                obj.setAttribute('style','border:1px solid red;');
                add.setAttribute('disabled','disabled');
            }else{
                obj.removeAttribute('style');
                usernameBool=true;
                if (userPhoneBool && userMailBool) {
                    add.removeAttribute('disabled');
                };
            }
        }
        /**
            验证电话并且设置输入框的样式
            obj    对象
        **/
        function checkPhone(obj){
            if (!verificationPhone(obj.value)) {
                obj.setAttribute('style','border:1px solid red;');
                add.setAttribute('disabled','disabled');
                add.setAttribute('disabled','disabled');
            }else{
                obj.removeAttribute('style');
                userPhoneBool=true;
                if (userMailBool && usernameBool) {
                    add.removeAttribute('disabled');
                };
            }
        }
        /**
            验证电子邮件并且设置输入框的样式
            obj    对象
        **/
        function checkMail(obj){
            if (!verificationMail(obj.value)) {
                obj.setAttribute('style','border:1px solid red;');
                add.setAttribute('disabled','disabled');
            }else{
                obj.removeAttribute('style');
                userMailBool=true;
                if (usernameBool && userPhoneBool) {
                    add.removeAttribute('disabled');
                };
            }
        }
        /**
            改变value的值和的样式
            obj    对象
        **/
        function clearUser(obj){
            if (obj.value=='5-15数字或者字母组成'){
                obj.value='';
                obj.removeAttribute('class');
            };
            obj.onblur=function(){
                    if (!this.value){
                        this.value="5-15数字或者字母组成";
                        this.setAttribute('class','user');
                    };
                    if (this.value !="5-15数字或者字母组成"){
                        this.removeAttribute('class');
                };
            }
        }
        /**
            改变value的值和的样式
            obj    对象
        **/
        function clearMail(obj){
            if (obj.value=='电子邮件/Email'){
                obj.value='';
                obj.removeAttribute('class');
            };
            obj.onblur=function(){
                if (!this.value) {
                    this.value="电子邮件/Email";
                    this.setAttribute('class','user');
                };
                if (this.value !="电子邮件/Email") {
                    this.removeAttribute('class');
                };
            }
        }
        /**
            改变value的值和的样式
            obj    对象
        **/
        function clearPhone(obj){
            if (obj.value=='电话号码/手机号码/Phone'){
                obj.value='';
                obj.removeAttribute('class');
            };
            obj.onblur=function(){
                if (!this.value) {
                    this.value="电话号码/手机号码/Phone";
                    this.setAttribute('class','user');
                };
                if (this.value !="电话号码/手机号码/Phone") {
                    this.removeAttribute('class');
                };
            }
        }
        /*
            在某个元素之后插入
        */
        function insertAfter(newElement,targetElement){
            var parentNodeElement=targetElement.parentNode;
            if (parentNodeElement.lastChild=targetElement) {
                parentNodeElement.appendChild(newElement);
            }else{
                parentNodeElement.insertBefore(newElement,targetElement.previousSibling);
            }
        }
/*----------------------------------------------------------------------------------------------------------------------------------------*/
        var usernameBool=false;
        var userMailBool=false;
        var userPhoneBool=false;
        var add=document.getElementById('add');
        add.        var userarr=document.getElementsByName('user');
        var table=document.getElementById('table').firstChild.nextSibling;  //注意table的需要找到tboy
        console.info(table);
              
        var td=new Array();
        var tr=document.createElement('tr');
        tr.setAttribute('style','background-color: rgb(236, 233, 216);');
        createUserTd(userarr,td,tr);
        createEditTD(tr);
        if(table.rows[1]){
            table.insertBefore(tr,table.rows[1]);                           //这里才能有效table.rows[1],如果是获取table;table.rows[1]会变为null
        }else{
            table.appendChild(tr);
        }
        document.form1.reset();
        for (var i = 0; i < userarr.length; i++) {
            userarr[i].setAttribute('class','user');
        };
        add.setAttribute('disabled','disabled');
        usernameBool=false;userMailBool=false;userPhoneBool=false;
        }
</script>
</html>



© 著作权归作者所有

huangyanxiong
粉丝 15
博文 66
码字总数 28662
作品 3
程序员
私信 提问
13 个最佳 JavaScript 数据表格库

JavaScript 是一种通常被用在网页开发中的编程语言。它主要是在互联网上的网页浏览器中开发出效果出众且可交互的特效。它是客户端脚本语言中的一种,是被用来作为通过用户的网页浏览器进行处...

oschina
2017/03/10
5K
7
在Bootstrap开发框架中使用dataTable直接录入表格行数据

在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些...

伍华聪
2018/10/23
0
0
抢先预览 ExtJS 4.2 的表格控件

在新发布的Ext JS 4.2测试版中,我们做了许多的改动。你可以在论坛公告处查看所有详细信息。在这篇文章中,我们将着重介绍性能提升的Grid组件。在之前关于Ext Js 4.1性能和基于此版本的应用的...

oschina
2013/01/23
2.8K
1
TypeScript VS JavaScript 深度对比

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?在选择开...

powertoolsteam
2018/06/29
0
0
IE下的调试工具IE WebDeveloper

IE下的调试工具IE WebDeveloper 由 愚人码头 撰写  http://www.css88.com/archives/967 IE WebDeveloper可以让你检查和编辑你的HTML DOM, 显示错误信息, 日志信息, 显示网站源代码, 监视DHT...

xcntime
2010/08/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

抽离css以及公共js

分离css 分离css:为何要把 CSS 文件分离出来,而不是直接一起打包在 JS 中。最主要的原因是我们希望更好地利用缓存。 extract-text-webpack-plugin > 1. 假设我们原本页面的静态资源都打包成...

莫西摩西
47分钟前
1
0
面向对象的7大原则

https://blog.csdn.net/u010355144/article/details/44940171

南桥北木
今天
2
0
Jenkins的配置从节点中默认没有Launch agent via Java Web Start,该如何配置使用

Jenkins的配置从节点中默认没有Launch agent via Java Web Start,如下图所示,而这种启动方式在Windows上是最方便的。 如何设置才能让出来呢? 1:打开"系统管理"——"Configure Global Sec...

shzwork
今天
2
0
BAT面试必问HashMap源码分析

HashMap 简介 HashMap 主要用来存放键值对,它基于哈希表的Map接口实现,是常用的Java集合之一。 JDK1.8 之前 HashMap 由 数组+链表 组成的,数组是 HashMap 的主体,链表则是主要为了解决哈...

别打我会飞
今天
12
0
RISC-V双周简报0x1f:一晚上写个RISC-V处理器玩玩(2018-09-01)

https://cnrv.io/bi-week-rpts/2018-09-01 https://blog.csdn.net/zoomdy/article/details/82914730...

whoisliang
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部