jQuery查找到一个table最后三行的第三列
如假设图，table行数不确定，第三列内容也不确定。需要给这三格添加统一的样式。求教大神，应该怎么写？...
如假设图，table行数不确定，第三列内容也不确定。需要给这三格添加统一的样式。求教大神，应该怎么写？
展开
3个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
table {
margin-top: 30px;
width: 300px;
border: 1px solid #ccc;
}
th, td {
text-align: center;
border: 1px solid #ccc;
}
</style>
<script>
function clickMe() {
var trs = $('tr', $('#table')); // table中所有行
for (var i = 0; i < trs.length; i++) {
if (i >= trs.length - 3) { // 后三行
var tds = $('td', $(trs[i])); // 当前行的所有td
$(tds[2]).css({ // 更改当前行第三个td的样式
'color': 'white',
'background-color': '#98bf21',
'font-family': 'Arial',
'font-size': '20px'
});
}
}
}
</script>
</head>
<body>
<input type="button" value="点我" style="cursor: pointer;" onclick="clickMe()">
<table id="table">
<tr>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
<tr>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
<tr>
<td>50</td>
<td>51</td>
<td>52</td>
<td>53</td>
</tr>
<tr>
<td>60</td>
<td>61</td>
<td>62</td>
<td>63</td>
</tr>
<tr>
<td>70</td>
<td>71</td>
<td>72</td>
<td>73</td>
</tr>
<tr>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
</tr>
</table>
</body>
</html>
如图，点击按钮更改后三行第三列单元格样式：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<!--STATUS OK-->
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta property="wb:webmaster" content="3aababe5ed22e23c" />
<meta name="referrer" content="always" />
<title>jQuery查找到一个table最后三行的第三列_百度知道</title>
<style>
#tblTest {
border-collapse: collapse;
}
#tblTest td {
border: 1px solid #DDD;
padding: 4px 6px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
var $trs = $("#tblTest tr");
for (var i = $trs.length - 3; i < $trs.length; i++) {
if (i < 0) {
continue;
}
var $tds = $($trs[i]).find("td");
if ($tds.length < 3) {
continue;
}
$($tds[2]).css({
"background-color": "#CCC"
});
}
});
</script>
</head>
<body>
<table id='tblTest'>
<tr>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
<tr>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
<tr>
<td>50</td>
<td>51</td>
<td>52</td>
<td>53</td>
</tr>
<tr>
<td>60</td>
<td>61</td>
<td>62</td>
<td>63</td>
</tr>
<tr>
<td>70</td>
<td>71</td>
<td>72</td>
<td>73</td>
</tr>
<tr>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
</tr>
</table>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
行数不确定，但你jq查找的时候是确定的吧。$('tr').length获取行数，然后得出最后三行的位置，再定位到着三行的第三个子单元格就好了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
