利用JS实现H5中的Table表格的隔行换色

最新推荐文章于 2024-06-29 23:26:25 发布

且听风雨且观尘

最新推荐文章于 2024-06-29 23:26:25 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS 前端文章标签： JS HTML5 隔行换色

本文链接：https://blog.youkuaiyun.com/yujianxin1995/article/details/81349015

JS 同时被 2 个专栏收录

4 篇文章

订阅专栏

前端

4 篇文章

订阅专栏

本文介绍了在前端学习过程中，利用JavaScript基础实现HTML5 Table的隔行换色功能。作者分享了自己初次尝试写技术博客的心得，并提供了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近正在学习前端的知识，正好进行到JS的基础阶段，为了以后更好的找一份工作，开始自己的技术博客的学习阶段，下面是刚学习的结果，今天有三个作业，分别是利用JS实现Table的隔行换色，有一点点事件的绑定问题，自己第一次写技术博客，大家且将就着看，也有参考别人的内容，比如自己美感不好，找了一个别人选的挺好看的颜色，废话不多说，直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<table id="Tab" align="center" width="70%" rules="all" cellspacing="0" cellpadding="2" border="1">
	<tr>
		<td>11</td>
		<td>12</td>
		<td>13</td>
	</tr>
	<tr>
		<td>21</td>
		<td>22</td>
		<td>23</td>
	</tr>
	<tr>
		<td>31</td>
		<td>32</td>
		<td>33</td>
	</tr>
	<tr>
		<td>41</td>
		<td>42</td>
		<td>43</td>
	</tr>
	<tr>
		<td>51</td>
		<td>52</td>
		<td>53</td>
	</tr>
	<tr>
		<td>71</td>
		<td>72</td>
		<td>73</td>
	</tr>
	<tr>
		<td>61</td>
		<td>62</td>
		<td>63</td>
	</tr>
	<tr>
		<td>81</td>
		<td>82</td>
		<td>83</td>
	</tr>
	<tr>
		<td>81</td>
		<td>82</td>
		<td>83</td>
	</tr>
	</table>
</body>
<script>
	 window.onload= function () {
		var Tab = document.getElementById("Tab");
                var trs = Tab.getElementsByTagName("tr");//是Tab下的tr行，所以使用的Tab.getElementsByTagName
		for(var i = 0; i < trs.length;i++) {     //循环所有的行
                if(i % 2 == 0) {                 //进行偶数判断，从而完成各行变色
                    trs[i].style.backgroundColor= "#888";
                }
            }
        };
</script>
</html>