JQuery比较两个数，并进行背景色填充 (有关问题升级了！难度加大了)

2013-08-01

JQuery比较两个数，并进行背景色填充 (问题升级了！难度加大了)例如：这一行的第一个数字04，我想将围红中04下

JQuery比较两个数，并进行背景色填充 (问题升级了！难度加大了)
例如：这一行的第一个数字04，我想将围红中04下对用的这个单元格的背景色填充为红色这一行的第二个数字10，我想将围红中10下对用的这个单元格的背景色填充为红色 …… 以此类推当然了，整个红球这一大列的数字（6个数）是变化的，我想用JQuery来实现，如果您有更好的想法，也可以

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>测试</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
    $("tr:gt(2)").each(function () {
        var tds = $("td.red_one", this);
        $("td.red_two", this).each(function () {
            var num = parseInt(this.innerHTML);
            if (tds[num - 1].innerHTML !== "")
                tds[num - 1].style.backgroundColor = "red";
        });
    });
});
</script>
</head>

<body>
    
    <br>

    <table align="center" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <table border="1" cellspacing="0" cellpadding="0">
                    <tr>
                        <td rowspan="2" height="18" width="72">期号</td> 
 
                        <td colspan="6" height="18">红球</td>
                        <td rowspan="2" width="18" height="18">蓝球</td>
                    </tr>
                    <tr>
                        <td width="18" height="18">一</td>
                        <td width="18" height="18">二</td>
                        <td width="18" height="18">三</td>
                        <td width="18" height="18">四</td>
                        <td width="18" height="18">五</td>
                        <td width="18" height="18">六</td>
                    </tr>
                    <c:if test="${not empty bonusList }">
                        <c:forEach items="${bonusList }" var="a">
                            <tr>
                                <td width="18" height="18"></td>
                                <td width="18" height="18" class="red_one">04</td> 
 
                                <td width="18" height="18" class="red_one">10</td>
                                <td width="18" height="18" class="red_one">14</td>
                                <td width="18" height="18" class="red_one">19</td>
                                <td width="18" height="18" class="red_one">23</td>
                                <td width="18" height="18" class="red_one">26</td>
                                <td width="18" height="18">06</td>
                            </tr>
                        </c:forEach>
                    </c:if>
                </table>
            </td>
            <td>
                <table border="1" cellspacing="0" cellpadding="0">
                    <tr>
                        <td colspan="33" height="18">围红</td>
                        <td rowspan="2" width="18" height="18">验证</td> 
 
                    </tr>
                    <tr>
                        <td width="18" height="18">01</td>
                        <td width="18" height="18">02</td>
                        <td width="18" height="18">03</td>
                        <td width="18" height="18">04</td>
                        <td width="18" height="18">05</td>
                        <td width="18" height="18">06</td>
                        <td width="18" height="18">07</td>
                        <td width="18" height="18">08</td>
                        <td width="18" height="18">09</td>
                        <td width="18" height="18">10</td>
                        <td width="18" height="18">11</td>
                        <td width="18" height="18">12</td>
                        <td width="18" height="18">13</td>
                        <td width="18" height="18">14</td> 
 
                        <td width="18" height="18">15</td>
                        <td width="18" height="18">16</td>
                        <td width="18" height="18">17</td>
                        <td width="18" height="18">18</td>
                        <td width="18" height="18">19</td>
                        <td width="18" height="18">20</td>
                        <td width="18" height="18">21</td>
                        <td width="18" height="18">22</td>
                        <td width="18" height="18">23</td>
                        <td width="18" height="18">24</td>
                        <td width="18" height="18">25</td>
                        <td width="18" height="18">26</td>
                        <td width="18" height="18">27</td>
                        <td width="18" height="18">28</td>
                        <td width="18" height="18">29</td> 
 
                        <td width="18" height="18">30</td>
                        <td width="18" height="18">31</td>
                        <td width="18" height="18">32</td>
                        <td width="18" height="18">33</td>
                    </tr>
                    <c:if test="${not empty ddwhoneList }">
                        <c:forEach items="${ddwhoneList }" var="a">
                            <tr>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td> 
 
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td> 
 
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td> 
 
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18" class="red_two">&nbsp;</td>
                                <td width="18" height="18">&nbsp;</td>
                            </tr>
                        </c:forEach>
                    </c:if>
                </table>
            </td>
        </tr>
    </table>
    <br>
    <!-- footer -->
    <jsp:include page="/global/footer.jsp"></jsp:include>

</body>
</html>

因为这个表需要从数据库的两个表中提取数据，所以在一个大表格中嵌套两个小表格，这样才可以使用<c:forEach items="${bonusList }" var="a">进行循环输出，如果您有更好的办法，请您告诉我！谢谢了！！！ jQuery HTML

javasript
[解决办法]
jquery 的

var redArr=[];
    $(document).ready(function () {
    $(".red_one").each(function () {
   redArr.push($(this).html());
    });
    $(".red_two").each(function () {
    //alert($(this).index());
    for(var i=0;i<redArr.length;i++){
    if(redArr[i]==($(this).index()+1)){
    $(this).css("background","red");
    }
    }
    });
});

[解决办法]
写了个例子
你之前的是判断循环是33*条数，假如有500条的话，当然是循环33*500次了...
我写的是6*500，就相对少点循环了。我是把你的class改成动态的了，给个参考
$(document).ready(function(){
for(var i = 0;$(".red_one" + i).length!=0;i++){
$(".red_one" + i).each(function(){
var index = $(this).html();
if(index.substring(0,1)=="0"){
index = index.substring(1);
}
index = index * 1;
$(".red_two" + i).eq(index-1).css("background","red");
})
}
})

热点排行

JavaScript

JQuery比较两个数，并进行背景色填充 (有关问题升级了！难度加大了)