原声JS实现表格行的添加

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
    var tab = null;  //先定义一个空对象,准备作为表格对象使用
    var arr = [                            //定义一个二维数组作为表格内,每次添加行时候的内容输入,这是一次添加三行
                [1,‘lisi‘,10,],
                [2,‘zhangsan‘,11,],
                [3,‘wangwu‘,12,]
              ];
//    var tds = null;   //定义一个空对象,准备作为单元格对象使用
    window.onload = function(){   //页面加载完成后找到表格对象
        tab = document.getElementById(‘tab‘);
        
    }
    //用来作为追加行的方法
    function addTr(){
        for(var i = 0 ; i<arr.length;i++){   //循环这个数组  追加数组内元素有几行准备添加几行
            tab.innerHTML += `<tr data = "`+arr[i][0]+`">  
                                <td onclick = "edit(this)">`+arr[i][0]+`</td>
                                <td onclick = "edit(this)">`+arr[i][1]+`</td>
                                <td onclick = "edit(this)">`+arr[i][2]+`</td>
                                <td><button onclick="delTr(this)">删除</button></td>
                            </tr>`  //妈的,以上这是一个终极字符串拼接
        }
//        console.log(tab);
//        tds = document.getElementsByTagName("td");  //每一次追加完行,更新所有的单元格对象
//        console.log(tds);
        }
    //当点击某一个单元格的时候调用这个方法
    function edit(obj){
        obj.innerHTML = `<input type="text" onBlur="change(this)" value="`+obj.innerHTML+`">`;//给这个单元格本身添加一个可编辑的区域 并添加一个失去焦点的事件执行一个函数change(并指定这个对象本身),它的值就是这个在单元格内编辑的内容
        obj.removeAttribute(‘onClick‘);  //然后再删除onclick属性
    }
    function change(obj){   //当单元格对象内的ipt失去焦点时执行这个函数
        var tdDom = obj.parentElement;  //找到这个对象的父元素
        console.log(tdDom);
        tdDom.innerHTML = obj.value;  //单元格对象的父元素在HTML中显示的是用户输入内容(用值来获取)
        tdDom.setAttribute("onClick","edit(this)"); //并且同时获取两个属性(点击事件,编辑此区域)
    }
    function delTr(obj){   //删除这一行的方法
        obj.parentElement.parentElement.remove();  // 删除:【这个单元格(对象)本身的父元素的父元素是行】
    }
    
    
</script>
</head>

<body>
<input type="text" onBlur="change(this)">
<button onClick="addTr()">点击增加一行</button>
<table id="tab" width="80%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th width="25%">编号</th>
        <th width="25%">姓名</th>
        <th width="25%">年龄</th>
        <th width="25%">操作</th>
    </tr>
    
</table>
</body>
</html>

相关文章