js点击表格改变背景色


var tab = document.getElementById("table");
     var rows = tab.rows;
     var rlen = rows.length;
     for (var i = 0; i < rlen; i++) { //遍历所有行
         var cells = rows[i].cells; //得到这一行的所有单元格
         for (var j = 0; j < cells.length; j++) {
             //给每一个单元格添加click事件
             cells[j].onclick = function() {
                 this.style.background = 'red';
             }

         }
     }

点击单元格改变颜色做完了,就是有一个问题,怎么判定,比如第三行第三列的单元格改变了颜色,然后在他前面的单元格点击都不会发生变化,后面的单元格点击照常改变颜色。这个问题怎么解决呢,求解疑。

可以点击td获取其父元素也就是当前tr下的所有子元素。然后循环。判断挡前下标的后一个的style是否为red.是的话改变,不是则不改变

可以将判断的依据写入数据项里,这里用ifChange,比如{name:'zhang',age:0,ifChange:false},每次点击判断数据里的ifChange。或者你给点击的单元格设置class,根据是否有这个class进入判断点击单元格是否发生变化