首页 > 代码库 > 使一个特定的表格隔行变色(引自锋利的jQuery)
使一个特定的表格隔行变色(引自锋利的jQuery)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="generator" content="editplus" /> <title>使一个特定的表格隔行变色</title> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <!--<script type="text/javascript">(function () { alert("函数已被调用！"); })();</script>--> <!-- 思路： 1. 根据表格id获取表格。 2. 在表格内获取<tbody>元素。 3. 在<tbody>元素下获取<tr>元素。 4. 循环输出获取的<tr>元素。 5. 对<tr>元素的索引值除以2并取模，然后根据奇偶设置不同的背景色。 --></head><body> <table id="tb"> <tbody> <tr><td>第一行</td><td>第一行</td></tr> <tr><td>第二行</td><td>第二行</td></tr> <tr><td>第三行</td><td>第三行</td></tr> <tr><td>第四行</td><td>第四行</td></tr> <tr><td>第五行</td><td>第五行</td></tr> </tbody> </table> <script type="text/javascript"> //传统方法： //var item = document.getElementById("tb"); //获取id为tb的元素(table) //var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素 //var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素 //for (var i = 0; i < trs.length; i++) //循环tr元素 //{ // if (i % 2 == 0) //取模(取余数。例如0%2==0,1%2==1,2%2==0) // { // trs[i].style.backgroundColor = "#888"; //改变符合条件的tr元素的背景色 // } //} //jQuery方法： $(‘#tb tbody tr:even‘).css("backgroundColor", "#888"); //获取id为tb的元素，然后寻找它下面的tbody标签，再寻找tbody下索引值是偶数的tr元素，改变它的背景色 //css("property","value");用来设置jQuery对象的样式 </script></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。