JQuery查找数据，并进行比较的问题
0
悬赏园豆：40
[已解决问题]
解决于 2013-07-12 10:23
例如： 这一行的第一个数字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>
最佳答案
1
<script type="text/javascript"> $(document).ready(function() { var tds = $("td.red_two"); $("td.red_one").each(function(){ var num = parseInt(this.innerHTML); tds[num - 1].style.backgroundColor = "red"; }); }); </script>
收获园豆：40
你好！非常感谢您的回复，您的程序非常好，我已经在单独的Html中运行成功，但是我的源程序是
1、连接
<td class="p"><a class="list" target="_blank" href="SearchDdwhoneServlet">大底围红(01)</a></td>
2、SearchDdwhoneServlet（因为数据都是从数据库中查询得到的）
package com.chk.doubleball.setvlet; import java.io.IOException; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.chk.doubleball.model.DdwhOne; import com.chk.doubleball.util.DBUtil; public class SearchDdwhoneServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 1、查询数据 List<DdwhOne> ddwhoneList = new ArrayList<>(); String sql = "select * from t_ddwh01 where _id > (select count(*) from t_ddwh01) - 100;"; Connection conn = DBUtil.getConn(); PreparedStatement pstmt = null; ResultSet rs = null; try { pstmt = conn.prepareStatement(sql); rs = pstmt.executeQuery(); while (rs.next()) { DdwhOne d = new DdwhOne(); d.set_id(rs.getInt("_id")); d.setIssue(rs.getInt("issue")); d.setOrder_red_one(rs.getString("order_red_one")); d.setOrder_red_two(rs.getString("order_red_two")); d.setOrder_red_three(rs.getString("order_red_three")); d.setOrder_red_four(rs.getString("order_red_four")); d.setOrder_red_five(rs.getString("order_red_five")); d.setOrder_red_six(rs.getString("order_red_six")); d.setBlue(rs.getString("blue")); d.setW_one(rs.getString("w_one")); d.setW_two(rs.getString("w_two")); d.setW_three(rs.getString("w_three")); d.setW_four(rs.getString("w_four")); d.setW_five(rs.getString("w_five")); d.setW_six(rs.getString("w_six")); d.setW_seven(rs.getString("w_seven")); d.setW_eight(rs.getString("w_eight")); d.setW_nine(rs.getString("w_nine")); d.setW_ten(rs.getString("w_ten")); d.setW_eleven(rs.getString("w_eleven")); d.setW_twelve(rs.getString("w_twelve")); d.setW_thirteen(rs.getString("w_thirteen")); d.setW_fourteen(rs.getString("w_fourteen")); d.setW_fifteen(rs.getString("w_fifteen")); d.setW_sixteen(rs.getString("w_sixteen")); d.setW_seventeen(rs.getString("w_seventeen")); d.setW_eighteen(rs.getString("w_eighteen")); d.setW_nineteen(rs.getString("w_nineteen")); d.setW_twenty(rs.getString("w_twenty")); d.setW_twentyone(rs.getString("w_twentyone")); d.setW_twentytwo(rs.getString("w_twentytwo")); d.setW_twentythree(rs.getString("w_twentythree")); d.setW_twentyfour(rs.getString("w_twentyfour")); d.setW_twentyfive(rs.getString("w_twentyfive")); d.setW_twentysix(rs.getString("w_twentysix")); d.setW_twentyseven(rs.getString("w_twentyseven")); d.setW_twentyeight(rs.getString("w_twentyeight")); d.setW_twentynine(rs.getString("w_twentynine")); d.setW_thirty(rs.getString("w_thirty")); d.setW_thirtyone(rs.getString("w_thirtyone")); d.setW_thirtytwo(rs.getString("w_thirtytwo")); d.setW_thirtythree(rs.getString("w_thirtythree")); d.setStatistics(rs.getInt("statistics")); ddwhoneList.add(d); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } finally { DBUtil.close(rs); DBUtil.close(pstmt); DBUtil.close(conn); } request.setAttribute("ddwhoneList", ddwhoneList); // 2、跳转 request.getRequestDispatcher("/table/table_dadiweihong.jsp").forward(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
3、调整的最终页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!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() { var tds = $("td.red_one"); $("td.red").each(function() { var num = parseInt(this.innerHTML); tds[num - 1].style.backgroundColor = "red"; }); }); </script> <style type="text/css"> body table { border: 1px solid #666666; text-align: center; font-size: 14px; color: #FFFFFF; } body table tr,td { border: 1px solid #666666; height: 18px; } .red { width: 18px; height: 18px; background-color: #D40000 } .blue { width: 18px; height: 18px; background-color: #2A1FAA; } .yellow { width: 18px; height: 18px; background-color: #FF7F00; } </style> </head> <body> <!-- title --> <jsp:include page="/global/title.jsp"></jsp:include> <!-- logo --> <jsp:include page="/global/logo.jsp"></jsp:include> <!-- navigation --> <jsp:include page="/global/navigation.jsp"></jsp:include> <!-- roll --> <jsp:include page="/global/roll.jsp"></jsp:include> <br> <table cellspacing="0" cellpadding="0" align="center"> <tr> <td rowspan="2" width="70">期号</td> <td class="red" colspan="6">开奖号码</td> <td class="blue" rowspan="2">蓝球</td> <td class="yellow" colspan="33">围红</td> <td rowspan="2" width="50">验证</td> </tr> <tr> <td class="red">一</td> <td class="red">二</td> <td class="red">三</td> <td class="red">四</td> <td class="red">五</td> <td class="red">六</td> <td class="yellow">01</td> <td class="yellow">02</td> <td class="yellow">03</td> <td class="yellow">04</td> <td class="yellow">05</td> <td class="yellow">06</td> <td class="yellow">07</td> <td class="yellow">08</td> <td class="yellow">09</td> <td class="yellow">10</td> <td class="yellow">11</td> <td class="yellow">12</td> <td class="yellow">13</td> <td class="yellow">14</td> <td class="yellow">15</td> <td class="yellow">16</td> <td class="yellow">17</td> <td class="yellow">18</td> <td class="yellow">19</td> <td class="yellow">20</td> <td class="yellow">21</td> <td class="yellow">22</td> <td class="yellow">23</td> <td class="yellow">24</td> <td class="yellow">25</td> <td class="yellow">26</td> <td class="yellow">27</td> <td class="yellow">28</td> <td class="yellow">29</td> <td class="yellow">30</td> <td class="yellow">31</td> <td class="yellow">32</td> <td class="yellow">33</td> </tr> <tbody> <c:if test="${not empty ddwhoneList }"> <c:forEach items="${ddwhoneList }" var="a"> <tr> <td>${a.issue }</td> <td class="red">${a.order_red_one }</td> <td class="red">${a.order_red_two }</td> <td class="red">${a.order_red_three }</td> <td class="red">${a.order_red_four }</td> <td class="red">${a.order_red_five }</td> <td class="red">${a.order_red_six }</td> <td class="blue">${a.blue }</td> <td class="red_one">${a.w_one }</td> <td class="red_one">${a.w_two }</td> <td class="red_one">${a.w_three }</td> <td class="red_one">${a.w_four}</td> <td class="red_one">${a.w_five}</td> <td class="red_one">${a.w_six}</td> <td class="red_one">${a.w_seven}</td> <td class="red_one">${a.w_eight}</td> <td class="red_one">${a.w_nine}</td> <td class="red_one">${a.w_ten}</td> <td class="red_one">${a.w_eleven}</td> <td class="red_one">${a.w_twelve}</td> <td class="red_one">${a.w_thirteen}</td> <td class="red_one">${a.w_fourteen}</td> <td class="red_one">${a.w_fifteen}</td> <td class="red_one">${a.w_sixteen}</td> <td class="red_one">${a.w_seventeen}</td> <td class="red_one">${a.w_eighteen}</td> <td class="red_one">${a.w_nineteen}</td> <td class="red_one">${a.w_twenty}</td> <td class="red_one">${a.w_twentyone}</td> <td class="red_one">${a.w_twentytwo}</td> <td class="red_one">${a.w_twentythree}</td> <td class="red_one">${a.w_twentyfour}</td> <td class="red_one">${a.w_twentyfive}</td> <td class="red_one">${a.w_twentysix}</td> <td class="red_one">${a.w_twentyseven}</td> <td class="red_one">${a.w_twentyeight}</td> <td class="red_one">${a.w_twentynine}</td> <td class="red_one">${a.w_thirty}</td> <td class="red_one">${a.w_thirtyone}</td> <td class="red_one">${a.w_thirtytwo}</td> <td class="red_one">${a.w_thirtythree}</td> <td class="red_one">${a.statistics}</td> </tr> </c:forEach> </c:if> </tbody> </table> <br> <!-- footer --> <jsp:include page="/global/footer.jsp"></jsp:include> </body> </html>
这样的话，JQuery就没法实现了
还要请你再帮我看看了
@horse_leo:
因为不清楚你的数据时怎样的，所以我不知道你最终的页面是怎样。
但是不管数据时怎样，只要你最后呈现在浏览器上的代码是你最开始提交的样子的话，那么jquery是可以运行的啊？
我不知道你说的jquery没法实现是什么意思？
我猜测是不是因为你的数据不止一行数据？会生成很多期的号码，如果是那样的话，也好解决
$(document).ready(function() { $("#tableID(自己设置) > tr").each(function(){ var tds = $(this).find("td.red_one"); $(this).find("td.red").each(function() { var num = parseInt(this.innerHTML); tds[num - 1].style.backgroundColor = "red"; }); }); });
