网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > jQuery

jQuery如何选取table表格的偶数行元素?

2021/9/9 23:20:52

html中选取table表格的偶数行有很多种方法,可以直接用css,也可以使用JavaScript,今天我们就来说说jQuery如何选取table表格的偶数行<tr>,话不多说,我们直接来看例子:<!DOCTYPE html><html><head><title>jQuery如何选取table表格的偶数…

        html中选取table表格的偶数行有很多种方法,可以直接用css,也可以使用JavaScript,今天我们就来说说jQuery如何选取table表格的偶数行<tr>,话不多说,我们直接来看例子:

<!DOCTYPE html>
<html>
<head>
<title>jQuery如何选取table表格的偶数行<tr>元素?www.woaidaogu.com</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("tr:even").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<table border="1">
<tr>
  <th>网站名</th>
  <th>网址</th>
</tr>
<tr>
<td>Google</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>Baidu</td>
<td>http://www.baidu.com</td>
</tr>
<tr>
<td>我爱捣鼓</td>
<td>http://www.woaidaogu.com</td>
</tr>
<tr>
<td>淘宝</td>
<td>http://www.taobao.com</td>
</tr>
<tr>
<td>Facebook</td>
<td>http://www.facebook.com</td>
</tr>
</table>
</body>
</html>

image.png

        对行进行其它的操作:

        1.选择第一行 $("tr:eq(0)")

        2.选择第N行 $("tr:eq(n-1)")

        3.选择奇数行 $("tr:odd")

        4.选择偶数行 $("tr:even")

        通过以上内容我们知道了jQuery如何选取table表格的偶数行<tr>元素,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

    暂无相关的数据...