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> </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> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td> </td> </tr> <tr> <td> </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> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td class="red_two"> </td> <td> </td> </tr> </table> </body> </html>
最佳答案
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
谢谢！！
很好用！！
但是我还有一个请求，就是：如果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:
$(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:
加上这句if (!Number.isNaN(num))之后，不行了，
这么说吧！class="red_two"的单元格中，有些单元格的值是null，而class="red_one"有些数字刚好就位于值为null的位置，
打个比方放吧！第二行的22这个数，在“围红”中对应的22这一列的值为“”，这样的话，就不对22这一列填充单元格背景色了
@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"; }); }); });
