javascript - 表格通过dom新加进去的行为什么没有隔行变色和鼠标经过的效果？

问题描述

问 题

表格通过dom新加进去的行为什么没有隔行变色和鼠标经过的效果？
效果图如下：

id为6和7是通过dom新加进去的行，没有隔行变色和鼠标经过变色的效果

js代码如下

window.onload=function () {

        var tab=document.getElementById('tab');
        var oldCol='';

        var oUser=document.getElementById('user');
        var oAge=document.getElementById('age');
        var oBtn=document.getElementById('btn');

        var id=tab.tBodies[0].rows.length+1;

        for(var i=0;i<tab.tBodies[0].rows.length;i++){
            if(i%2){
                tab.tBodies[0].rows[i].style.backgroundColor='purple';
            }else {
                tab.tBodies[0].rows[i].style.backgroundColor='';
            }
            tab.tBodies[0].rows[i].onmouseover=function () {
                oldCol=this.style.backgroundColor;
                this.style.backgroundColor='green';
            };
            tab.tBodies[0].rows[i].onmouseout=function () {
                this.style.backgroundColor=oldCol;
            };
        }

        oBtn.onclick=function () {
            var oTr=document.createElement('tr');

            var oTd=document.createElement('td');
            oTd.innerHTML=id++;
            oTr.appendChild(oTd);

            var oTd=document.createElement('td');
            oTd.innerHTML=oUser.value;
            oTr.appendChild(oTd);

            var oTd=document.createElement('td');
            oTd.innerHTML=oAge.value;
            oTr.appendChild(oTd);

            var oTd=document.createElement('td');
            oTd.innerHTML='<a href="javascript:;">删除</a>';
            oTr.appendChild(oTd);

            oTd.getElementsByTagName('a')[0].onclick=function () {
                tab.tBodies[0].removeChild(this.parentNode.parentNode);
            };
            
            tab.tBodies[0].appendChild(oTr);
        };

想问一下为什么通过dom新加的行没有效果，还有可以通过什么办法能够使通过dom加进去的行也有效果？恳请热心的朋友们帮忙解答一下（>.<）谢谢~~

解决方案

后添加的dom元素是没有添加事件的。1.可以将事件封装成函数，创建新dom后添加给它。2.使用css的nth-child给奇偶行添加样式。3.将事件代理到父元素。

这篇关于javascript - 表格通过dom新加进去的行为什么没有隔行变色和鼠标经过的效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！