JS节点操作 （表格在js中添加行和单元格，并有一个删除键）

Posted 2020-10-31 王保利d窝

 1 <div id="div">
 2     <table id="tab">
 3         <tr>
 4             <th>编号</th>
 5             <th>姓名</th>
 6             <th>性别</th>
 7             <th>年龄</th>
 8         </tr>
 9     </table>
10 </div>

html内容  表格在js中添加行和单元格，并有一个删除键

 

window.onload = function(){
    var data = [
        [1,"王保利","男","10"],
        [2,"向兆泽","男","11"],
        [3,"李清坤","男","12"],
        [4,"陈鹏","男","33"]
    ];
    //初始化数据  把数据库的数据输出到页面上
    initData(data);
    
    //添加事件    添加一行
    var addBtnDom = document.getElementById(‘btn‘);
    addBtnDom.addEventListener(‘click‘,addElement);
};
//运行添加一行函数
function addElement(){
//    找到table
    var tab = document.getElementById(‘tab‘);
//添加一行                 添加节点
    var trDom = document.createElement(‘tr‘);    
//一共有5个单元个所以循环五次
    for(var i=0 ; i<5; i++){
//     每循环一次添加一个单元格
        var tdDom = document.createElement(‘td‘);
//单元格的内容为空
        tdDom.innerHTML =  " ";
//把td放到tr里面
        trDom.appendChild(tdDom);
    }
//把tr放到table里
    tab.appendChild(trDom);
}


/*
功能：用来把数据库中的数据放到页面上显示
    数据是二维数组[【编号，姓名，性别，年龄】,...]
参数：无
返回：无
*/
//运行页面加载完成后给的函数
function initData(dd){
//    找到table
    var tab = document.getElementById(‘tab‘);
    //有多少tr呢  dd.length 
    for(var i=0 ; i<dd.length; i++){
//        每循环一次在table里追加一行  tr
        var trDom = document.createElement(‘tr‘);    
//       每次添加tr时给tr添加一个标记   在下面运行删除时会用到
        trDom.setAttribute(‘num‘,i);
        //有多少td呢  dd[i].length
        for(var j=0 ; j<dd[i].length; j++){
//            每次循环添加一个td
            var tdDom = document.createElement(‘td‘);
//    把添加的td输出到页面上       dd[i][j] =  dd数组中二维数组的下标i一维数组的j下标的位置
            tdDom.innerHTML = dd[i][j];
//        把td添加到tr中
            trDom.appendChild(tdDom);
        }
//        在大循环中每次添加一个td。。  修改删除所在的单元格
        var tdDom = document.createElement(‘td‘);
//        每次添加单元格事，在单元格中添加一个按钮
        var btnModDom = document.createElement(‘button‘);
//       按钮的内容是修改
        btnModDom.innerHTML= ‘修改‘;
//        按钮的颜色是红色
        btnModDom.style.color=‘red‘;
//        把按钮添加到td里
        tdDom.appendChild(btnModDom);
//        每次添加单元格事，在单元格中添加一个按钮        
        var btnModDom = document.createElement(‘button‘);
//       按钮的内容是删除
        btnModDom.innerHTML= ‘删除‘;
//     给删除添加一个删除事件
        btnModDom.setAttribute(‘onClick‘,‘delThis(this)‘);
//     并给这个按钮添加一个标记删除时可以用到
        btnModDom.setAttribute(‘num‘,i);
//        btnModDom.addEventListener(‘click‘,show);
//       每次循环都把按钮追加到单元格
        tdDom.appendChild(btnModDom);
//        把td添加到tr里
        trDom.appendChild(tdDom);
        //把tr追加到table里面
        tab.appendChild(trDom);
    }
}
//运行delthis   删除事件
function delThis(obj){
//    找到传过来的这个元素的num值
//    obj.getAttribute(‘num‘);
//找到所有的行，  tr
//    var trArr = document.getElementsByTagName(‘tr‘);
//   循环所有的tr
//    for(var i=0 ; i<trArr.length; i++){
//        如果得到的这个元素的num和循环出来的值的num相等
//        if(trArr[i].getAttribute(‘num‘) == obj.getAttribute(‘num‘)){
//    就删除这个行
//            trArr[i].remove();
//    结束循环
//            break;
//        }
//    }   找到元素的父标签td的父标签tr然后删除掉
    console.log(obj.parentElement.parentElement.parentElement.remove());
}

js内容

 

 

 

一、六种JS插入节点的方式

innerHTML、outerHTML、appendChild、insertBefore、insertAdjacentHTML、applyElement

今天介绍一下appendChild。

1.什么是节点

　　HTML文档中的所有内容都是节点：

　　1.整个文档时一个文档节点。

　　2.每个HTML元素是元素节点。

　　3.HTML元素内的文本是文本节点。

　　4.每个HTML属性是属性节点。

　　5.每个注释是注释节点。

 

 

一、创建节点、追加节点

 

1.createElement创建一个元素节点。
2.appendChild 追加一个节点。
3.createTextNode创建一个文本节点。
二、删除、移除节点
1、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。

 

三、替换节点
1、replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。

 

四、查找节点
1、childNodes 包含文本节点和元素节点的子节点。