这个其实很简单，第一步把你想要实现的变颜色功能封装成函数；第二步在window.onload时调用一次；第三步在点击按钮时调用一次；

具体需要修改如下代码：

添加addColor函数

function addColor() { //把下面的功能封装成函数
                      for(var i=0;i<otab.tBodies[0].rows.length;i++){
                  
                  //下面是鼠标移到表格上时整行背景变色，当鼠标离开时整行背景回到原来的颜色；
                  otab.tBodies[0].rows[i].onmouseenter = function(){
                      ochun[0]=this.style.backgroundColor; //将rows[i]行原来的背景颜色存起来；
                      ochun[1]=this.style.color;
                      this.style.backgroundColor = '#276619';
                  };
                  
                  otab.tBodies[0].rows[i].onmouseout = function(){
                      this.style.backgroundColor =ochun[0]; //当鼠标移开时调用ochun[0]里面的内容；
                      this.style.color = ochun[1];
                  }
                  
                  //背景隔行变色
                  if(i%2 == 0){
                      otab.tBodies[0].rows[i].style.backgroundColor = '#992229';
                  }
                  else{
                      otab.tBodies[0].rows[i].style.backgroundColor = '';
                  }
              };
              }

onload时调用addColor

window.onload = function(){
              var otab = document.getElementById('otable');
              var ochun = ["aBcolo","afoncolo"];
              addColor(); //onload时调用一次
              [...]
};

onclick时再调用一次

obat.onclick = function(){
                  [...]
                  otab.tBodies[0].appendChild(oTr);
                  addColor(); //这里再调用一次
              };

首先你这里的需求有这么几个：

1. 添加一行表格

2. 表格隔行变色，鼠标 hover 时变色

3. 删除一行表格

那么你的代码的问题是：

1. 隔行变色的代码只在 window.onload 中的 for 循环中被调用，所以只有已有的行才有隔行的效果，新加入的行没有这个效果

2. 删除这个功能你定义在 obat.onclick 这个函数里，那么显然已有行，并没有添加删除事件，当然已有行删不了啦╮(╯▽╰)╭

解决方案：

• 隔行和 hover 效果：其实最好的方法是用 CSS 实现：主要利用 :nth-child(odd/even) 和 :hover 这两个伪类

• 当然如果你非要用 JavaScript，那就封装成一个效果函数和一个事件函数

• window.onload 的时候运行效果函数和事件函数，添加效果和事件

• 添加一行后运行效果函数并给新行添加事件

• 删除一行后运行效果函数

• →_→好蛋疼...

bootstrap + angular

1. 你设置样式的时候只设置了原来那两行而已，所以新添加的无效

2. 你点击事件只绑定了你添加的那些行，所以原来的无效