例如：
这一行的第一个数字05，我想将围红中05下对用的这个单元格的背景色填充为红色
这一行的第二个数字09，我想将围红中09下对用的这个单元格的背景色填充为红色
……
以此类推
当然了，整个红球这一大列的数字（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下对用的这个单元格的背景色填充为红色
这一行的第二个数字09，我想将围红中09下对用的这个单元格的背景色填充为红色
……
以此类推
当然了，整个红球这一大列的数字（6个数）是变化的，
我想用JQuery来实现，如果您有更好的想法，也可以
-->
<script type="text/javascript">
$(document).ready(function() {
var tds = $("td.red_one");
alert(tds);
});
</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">25</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>
</table>
</body>
</html>
<td class="p"><a class="list" target="_blank" href="SearchDdwhoneServlet">大底围红(01)</a></td>
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);
}}
<%@ 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>，<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>
这样的话JQuery就没法实现功能了
把你的表格赋给table 然后、、、 这是个笨办法 效率很慢 但很有效果
$.each(table, function (a, a_item) {
alert(a + ":" + a_item);// $.each(a_item, function (b, b_item) {
alert(b + ":" + b_item);
//alert取到的innerHTML属性:
// <tbody><tr>
// <td>1</td>
// <td>2</td>
// </tr>
// <tr>
// <td>3</td>
// <td>4</td>
// </tr>
// <tr>
// <td>5</td>
// <td>6</td>
// </tr>
//</tbody>
})
})
<table id="tb1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>的话LZ再去找找JQ选择器相关的资料 JQ的选择器还是很强大的
$(function(){
$('td.red_one').each(function(){
$('td.red_two:eq(' + (Number($(this).text()) - 1) + ')').css({background:'red'});
});
});
</script>