首页 新闻 搜索 专区 学院

JQuery比较两个数,并进行背景色填充

0
悬赏园豆:20 [已解决问题] 解决于 2013-07-12 17:49

例如:     这一行的第一个数字05,我想将围红中05下对用的这个单元格的背景色填充为红色     这二行的第二个数字10,我想将围红中10下对用的这个单元格的背景色填充为红色     ……     以此类推         当然了,整个红球这一大列的数字(6个数)是变化的,         我想用JQuery来实现,如果您有更好的想法,也可以

 我借鉴了别人的方法,但是这个方法,都把背景色填充到了第一行,

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body table tr td{width:18px; height:18px;
text-align:center;
}
</style>
<script src="JQuery/jquery-1.10.1.js" type="text/javascript">
</script>
<!-- 
    例如:
    这一行的第一个数字05,我想将围红中05下对用的这个单元格的背景色填充为红色
    这二行的第二个数字10,我想将围红中10下对用的这个单元格的背景色填充为红色
    ……
    以此类推
    
    当然了,整个红球这一大列的数字(6个数)是变化的,
    
    我想用JQuery来实现,如果您有更好的想法,也可以

    我借鉴了别人的方法,但是这个方法,都把背景色填充到了第一行,
-->
<script type="text/javascript">
$(document).ready(function() {
    var tds =  $("td.red_two");
    alert(tds.length);
    $("td.red_one").each(function(){
        var num = parseInt(this.innerHTML);
        alert(num);
        tds[num - 1].style.backgroundColor = "red";
    });
});

</script>
</head>

<body>

<br>
<br>
<table align="center" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="2">期号</td>
    <td colspan="6">红球</td>
    <td rowspan="2">蓝球</td>
    <td colspan="33">围红</td>
    <td rowspan="2">验证</td>
  </tr>
  <tr>
    <td>一</td>
    <td>二</td>
    <td>三</td>
    <td>四</td>
    <td>五</td>
    <td>六</td>
    <td>01</td>
    <td>02</td>
    <td>03</td>
    <td>04</td>
    <td>05</td>
    <td>06</td>
    <td>07</td>
    <td>08</td>
    <td>09</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
    <td>29</td>
    <td>30</td>
    <td>31</td>
    <td>32</td>
    <td>33</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td class="red_one">05</td>
    <td class="red_one">09</td>
    <td class="red_one">14</td>
    <td class="red_one">17</td>
    <td class="red_one">23</td>
    <td class="red_one">29</td>
    <td>&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td class="red_one">04</td>
    <td class="red_one">10</td>
    <td class="red_one">14</td>
    <td class="red_one">22</td>
    <td class="red_one">28</td>
    <td class="red_one">32</td>
    <td>&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td class="red_two">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
horse_leo的主页 horse_leo | 初学一级 | 园豆:17
提问于:2013-07-12 10:22
< >
分享
最佳答案
0
$(document).ready(function () {

    $("tr:gt(1)").each(function () {
        var tds = $("td.red_two",this);
        $("td.red_one",this).each(function () {
            var num = parseInt(this.innerHTML);
            tds[num - 1].style.backgroundColor = "red";
        });
    });
});
收获园豆:20
TiestoRay | 小虾三级 |园豆:687 | 2013-07-12 11:04

谢谢!!

很好用!!

但是我还有一个请求,就是:如果num != null,这个条件要加在tds[num - 1].style.backgroundColor = "red";之前,语句该怎么写,

 

$(document).ready(function () {

    $("tr:gt(1)").each(function () {
        var tds = $("td.red_two",this);
        $("td.red_one",this).each(function () {
            var num = parseInt(this.innerHTML);
<!-- 这里要增加判断,num 不等于 null -->
            tds[num - 1].style.backgroundColor = "red";
        });
    });
});

 

 

 

 

我买的书还没到,现在急着用,还要麻烦你再写一下

horse_leo | 园豆:17 (初学一级) | 2013-07-12 14:26

@horse_leo: 

$(document).ready(function () {
    $("tr:gt(1)").each(function () {
        var tds = $("td.red_two",this);
        $("td.red_one",this).each(function () {
            var num = parseInt(this.innerHTML);
            if (!Number.isNaN(num))
                tds[num - 1].style.backgroundColor = "red";
        });
    });
});
TiestoRay | 园豆:687 (小虾三级) | 2013-07-12 14:33

@TiestoRay: 

加上这句if (!Number.isNaN(num))之后,不行了,

这么说吧!class="red_two"的单元格中,有些单元格的值是null,而class="red_one"有些数字刚好就位于值为null的位置,

打个比方放吧!第二行的22这个数,在“围红”中对应的22这一列的值为“”,这样的话,就不对22这一列填充单元格背景色了

horse_leo | 园豆:17 (初学一级) | 2013-07-12 14:53

@horse_leo: 

$(document).ready(function () {
    $("tr:gt(1)").each(function () {
        var tds = $("td.red_two", this);
        $("td.red_one", this).each(function () {
            var num = parseInt(this.innerHTML);
            if (tds[num - 1].innerHTML !== "")
                tds[num - 1].style.backgroundColor = "red";
        });
    });
});
TiestoRay | 园豆:687 (小虾三级) | 2013-07-12 15:04
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册