首頁 > 問答 > 主體

javascript - 我又来了，关于JS的问题，在指定表格添行或单元格并按条件显示样式的问题。。谢谢大神哈。

我要的效果是；在两个文本域里输入内容后，点击添加按钮，在下面的表格里添加一行表格；并且表格还会按下面代码里写的那样有隔行变色、鼠标移到行上时背景变色的效果；我现在的问题是
1、添加的表格没有隔行变色的效果；
2、添加的表格鼠标移上去后背景颜色没变；
3、不是通过上面添加按钮添加的表格无法删除；（即原来手动在编辑器里添加的两行表格不能通过点击删除按钮来删除）；
请求大神指正我代码中的问题，如果能说明我的问题出在哪里应该怎么修改最好，谢谢大神们哈；

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>跟据条件添加或删除一行表格</title>
        <script>
          window.onload = function(){
              var otab = document.getElementById('otable');
              var ochun = ["aBcolo","afoncolo"];
              
              //背景隔行变色并且鼠标移到表格后表格行背景变色，鼠标移出进恢复到原来的背景颜色
              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 = '';
                  }
              };
              
              //下面是点击添加按钮后可以在表格里添加一行三列的表格；
              var obat = document.getElementById('otbut');
              var onem = document.getElementById('oneme');
              var onian = document.getElementById('nian');
              var oid = otab.tBodies[0].rows.length+1;
              
              obat.onclick = function(){
                  var oTr = document.createElement('tr');//添加一行
                  
                  //第一列单元格1
                  var oTd = document.createElement('td');
                  oTd.innerHTML=oid++;
                  oTr.appendChild(oTd);
                  
                  //第二列单 元格
                  var oTd = document.createElement('td');
                  oTd.innerHTML = onem.value;
                  oTr.appendChild(oTd);
                  
                  //第三列单 元格
                  var oTd = document.createElement('td');
                  oTd.innerHTML = onian.value;
                  oTr.appendChild(oTd);
                  
                  //第四列单 元格
                  var oTd = document.createElement('td');
                  oTd.innerHTML = "<a href='javascript:;'>删除</a>";
                  oTr.appendChild(oTd);
                  
                  //下面是点击标签A后删除一行‘rows’;
                  oTd.getElementsByTagName('a')[0].onclick = function(){
                      otab.tBodies[0].removeChild(this.parentNode.parentNode);
                  };
                  
                  otab.tBodies[0].appendChild(oTr);
              };
              
              
              //
          };
        </script>
    </head>
    <body>
        <input type="text" value=" " id="oneme" />
        <input type="text" value=" " id="nian" />
        <input type="button" value="添加" id="otbut" style="width: 100px;" />
        <table border="1" width="500" id="otable" style="margin-top: 20px;">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>李丰</td>
                    <td>28</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>张佳宜</td>
                    <td>18</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

怪我咯2774 天前298

全部回覆(4)我來回復

PHPz2017-04-10 18:03:09

这个其实很简单，第一步把你想要实现的变颜色功能封装成函数；第二步在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(); //这里再调用一次
              };

回覆

巴扎黑

巴扎黑2017-04-10 18:03:09

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

添加一行表格
表格隔行变色，鼠标 hover 时变色
删除一行表格

那么你的代码的问题是：

隔行变色的代码只在 window.onload 中的 for 循环中被调用，所以只有已有的行才有隔行的效果，新加入的行没有这个效果
删除这个功能你定义在 obat.onclick 这个函数里，那么显然已有行，并没有添加删除事件，当然已有行删不了啦╮(╯▽╰)╭

解决方案：

隔行和 hover 效果：其实最好的方法是用 CSS 实现：主要利用 :nth-child(odd/even) 和 :hover 这两个伪类
当然如果你非要用 JavaScript，那就封装成一个效果函数和一个事件函数
window.onload 的时候运行效果函数和事件函数，添加效果和事件
添加一行后运行效果函数并给新行添加事件
删除一行后运行效果函数
→_→好蛋疼...

回覆

高洛峰2017-04-10 18:03:09

bootstrap + angular

回覆

PHP中文网2017-04-10 18:03:09

你设置样式的时候只设置了原来那两行而已，所以新添加的无效
你点击事件只绑定了你添加的那些行，所以原来的无效

回覆

取消回覆