Question

我有一个代码可以根据单元格中的值更改html表格单元格的颜色（1-6）。以前代码只给数字1-5赋值，它运行得很好。我今天增加了第6个，它仍然将颜色分配为5。

facepalm 任何想法？

js：

$(function() {
    $('tr > td').each(function(index) {
        var scale = [['Green', 1], ['Red', 2], ['Yellow', 3], ['Transparent', 4],  ['Transparent', 5], ['Blue', 6] ];
        var score = $(this).text();
        for (var i = 0; i < scale.length; i++) {
            if (score >= scale[i][1]) {
                $(this).addClass(scale[i][0]);
            }
        }
    });
});

的CSS：

.Green {
background-color: #7bdb78;
color: #7bdb78;
border: 1px solid black;}
.Red {
    background-color: #db7878;
    color: #db7878;
}

.Yellow {
    background-color: #fcff82;
    color: #fcff82;
}
.Blue {
    background-color:#3399FF;
    color: #3399FF;
}


.Transparent {
    background-color: rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0);
    }

Answer 1

不幸的是，你的问题不够明确，但我仍然回答我对你的问题的理解。我还在你的代码中修改了一下，我给你留了一些评论。

我希望有所帮助。

scope.myEnter

$('tr > td').each(function(index) {
/*
I would't use 2d array to store both of class name and the ref number, 1d array is enough
*/
/*
var scale = [['Green', 1], ['Red', 2], ['Yellow', 3], ['Transparent', 4],  ['Transparent', 5], ['Blue', 6] ];
*/
  var scale = ['green','red','yellow','transparent','transparent','blue','error'];
  
  // I think that this func is very important to vlid index value 
  function isVlid (){
  var arg    = arguments[0],
      length = scale.length -1;
   return arg < length && arg >= 0 ? arg : length;
  }
  
  
  // you don't need run inner loop to search inside the array 
  var score = parseInt($(this).text());
  $(this).addClass(scale[isVlid(score)]);
  
});

/*
It's highly recommended to keep attributes names in lower case as a best practices  
*/

.green {
  background-color: #7bdb78;
  color: #7bdb78;
  border: 1px solid black;
}

.red {
  background-color: #db7878;
  color: #db7878;
}

.yellow {
  background-color: #fcff82;
  color: #fcff82;
}

.transparent {
  background-color: rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0);
  border-color: rgba(255, 255, 255, 0);
}

.blue {
  background-color: #3399FF;
  color: #3399FF;
}

.error{
background-color:#ff0000;
color:#ff0000;
}

Answer 2

您的代码将所有较低值类应用于每个节点，Transparent类定义覆盖其他节点。

我认为你想要以相反的顺序循环，并在添加一个类时立即爆发：

＆＃13;

$(function() {
    $('tr > td').each(function(index) {
        var scale = [['Green', 1], ['Red', 2], ['Yellow', 3], ['Transparent', 4],  ['Transparent', 5], ['Blue', 6] ];
        var score = $(this).text();
        for (var i = scale.length - 1; i >= 0; i--) {
            if (score >= scale[i][1]) {
                $(this).addClass(scale[i][0]);
                break;
            }
        }
    });
});

＆＃13;

.Green {
background-color: #7bdb78;
color: #7bdb78;
border: 1px solid black;}
.Red {
    background-color: #db7878;
    color: #db7878;
}

.Yellow {
    background-color: #fcff82;
    color: #fcff82;
}
.Blue {
    background-color:#3399FF;
    color: #3399FF;
}


.Transparent {
    background-color: rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0);
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
</table>

＆＃13;

一直看着这个js太久了，我错过了什么？

2 个答案: