js添加类没有效果，表格数字正负时显示不同的颜色，不知道哪错了
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.green{color: #04a008;}
.red{color: #fb0202;}
table{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:600px;border-collapse:collapse;margin-top: 20px;}
table th,table td{border:1px solid #ccc;text-align: center;line-height: 30px;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.1.min.js" ></script>
<script>
// window.onload=function(){
// var nubm1=12;
// }
$(document).ready(function () {
var nubm1=12
var nubm2=-5;
var nubm3=7;
var nubm=new Array("12","-5","7");
//alert(nubm.length);
// alert(nubm);
$("#content tbody").append("<tr><td class='change'>"
+nubm1+"</td><td class='change'>"+nubm2
+"</td><td class='change'>"+nubm3+"</td></tr>");
for(var i=0;i<nubm.length;i++){
// alert(nubm[i]);
// alert(typeof nubm[i]);
if(nubm[i] > "0"){
alert( typeof nubm[i]);
$(nubm[i]).parent().addClass("red");
}else{
$(this).parent().addClass("green");
}
}
});
</script>
</head>
<body>
<table id="content">
<thead>
<tr>
<th>11</th>
<th>22</th>
<th>33</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td></td>
<td></td>
<td></td>
</tr> -->
</tbody>
</table>
</body>
</html>
像是这种写法可以吗？
var col2=elements[2]>0?"red":"green";
document.write("<span style='color:"+col2+"'>"+elements[0]+":"+elements[1]+" "+elements[2]+" "+elements[3]+"%</span>"); 展开
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.green{color: #04a008;}
.red{color: #fb0202;}
table{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:600px;border-collapse:collapse;margin-top: 20px;}
table th,table td{border:1px solid #ccc;text-align: center;line-height: 30px;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.1.min.js" ></script>
<script>
// window.onload=function(){
// var nubm1=12;
// }
$(document).ready(function () {
var nubm1=12
var nubm2=-5;
var nubm3=7;
var nubm=new Array("12","-5","7");
//alert(nubm.length);
// alert(nubm);
$("#content tbody").append("<tr><td class='change'>"
+nubm1+"</td><td class='change'>"+nubm2
+"</td><td class='change'>"+nubm3+"</td></tr>");
for(var i=0;i<nubm.length;i++){
// alert(nubm[i]);
// alert(typeof nubm[i]);
if(nubm[i] > "0"){
alert( typeof nubm[i]);
$(nubm[i]).parent().addClass("red");
}else{
$(this).parent().addClass("green");
}
}
});
</script>
</head>
<body>
<table id="content">
<thead>
<tr>
<th>11</th>
<th>22</th>
<th>33</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td></td>
<td></td>
<td></td>
</tr> -->
</tbody>
</table>
</body>
</html>
像是这种写法可以吗？
var col2=elements[2]>0?"red":"green";
document.write("<span style='color:"+col2+"'>"+elements[0]+":"+elements[1]+" "+elements[2]+" "+elements[3]+"%</span>"); 展开
1个回答
展开全部
你好，你有些地方理解错了,nubm是声明为一个数组，存放的是字符串，并非直接读取的文档元素，所以$(nubm[i])来获取对象是获取不到的
帮你改了下，你可以看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.green{color: #04a008;}
.red{color: #fb0202;}
table{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:600px;border-collapse:collapse;margin-top: 20px;}
table th,table td{border:1px solid #ccc;text-align: center;line-height: 30px;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.1.min.js" ></script>
<script>
// window.onload=function(){
// var nubm1=12;
// }
$(document).ready(function () {
var nubm1=12
var nubm2=-5;
var nubm3=7;
var nubm=new Array("12","-5","7");
//alert(nubm.length);
// alert(nubm);
$("#content tbody").append("<tr><td class='change'>"
+nubm1+"</td><td class='change'>"+nubm2
+"</td><td class='change'>"+nubm3+"</td></tr>");
var $td = $("#content tbody").find('td');
for(var i=0;i<nubm.length;i++){
// alert(nubm[i]);
// alert(typeof nubm[i]);
if(nubm[i] > "0"){
alert( typeof nubm[i]);
$td.eq(i).addClass("red");
}else{
$td.eq(i).addClass("green");
}
}
});
</script>
</head>
<body>
<table id="content">
<thead>
<tr>
<th>11</th>
<th>22</th>
<th>33</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td></td>
<td></td>
<td></td>
</tr> -->
</tbody>
</table>
</body>
</html>
追问
这个判断写的还有更简洁的写法吗？多谢大侠指教
for(var i=0;i 0){
$td.eq(i).addClass("red");
}else{
$td.eq(i).addClass("green");
}
if(nubm[i] == 0){
$td.eq(i).css("color","#000");
}
}
追答
其实这个判断其实也不是很复杂，最后一个是不是少了个else？
正确的写法可以是
var length = $td.length; //声明一个变量保存$td的个数，以便for循环时不用每次都去计算$td的个数
for(var i=0;i<length;i++){
if(nubm[i] > 0){
$td.eq(i).addClass("red");
}else if(nubm[i] < 0){
$td.eq(i).addClass("green");
}else{
$td.eq(i).css('color','#ffff00');
}
}
如果你真想换种方式写，可以用三元运算符去写
var length = $td.length;
for(var i=0;i<length;i++){
nubm[i] > 0 ? $td.eq(i).addClass("red") : nubm[i] < 0 ? $td.eq(i).addClass("green") : $td.eq(i).css('color','#ffff00');
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
