分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

原生JS实现表格的隔行换色

发布时间:2023-09-06 02:02责任编辑:顾先生关键词:暂无标签

步骤如下:

1、利用getid获取到表格的id

2、获取到表格的行数

3、利用一个循环遍历行数,用if条件判断奇偶,用.style.backgroundColor="颜色"设置颜色

完成

 1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title>表格隔行换色功能</title> 6 ????????<script type="text/javascript"> 7 ????????????window.onload = function(){ 8 ????????????????//1、获取表格 9 ????????????????var tab = document.getElementById("tal");10 ????????????????//2、获取表格中tbody的行数11 ????????????????var len = tab.tBodies[0].rows.length12 // ???????????????alert(len)13 ????????????????//3、开始循环,设置颜色14 ????????????????for(var i = 0;i<len;i++){15 ????????????????????if(i%2==0){16 ????????????????????????tab.tBodies[0].rows[i].style.backgroundColor= "red";17 ????????????????????}else{18 ????????????????????????tab.tBodies[0].rows[i].style.backgroundColor = "green";19 ????????????????????}20 ????????????????}21 ????????????}22 ????????</script>23 ????</head>24 ????<body>25 ????????<table border="1px" width="500px"height="50px"align="center"id="tal">26 ????????????<thead>27 ????????????????<tr>28 ????????????????????<th>编号</th>29 ????????????????????<th>姓名</th>30 ????????????????????<th>年龄</th>31 ????????????????</tr>32 ????????????</thead>33 ????????????<tbody>34 ????????????????<tr>35 ????????????????????<td>1</td>36 ????????????????????<td>张三</td>37 ????????????????????<td>17</td>38 ????????????????</tr>39 ????????????????<tr>40 ????????????????????<td>2</td>41 ????????????????????<td>李四</td>42 ????????????????????<td>18</td>43 ????????????????</tr>44 ????????????????<tr>45 ????????????????????<td>3</td>46 ????????????????????<td>王五</td>47 ????????????????????<td>19</td>48 ????????????????</tr>49 ????????????????<tr>50 ????????????????????<td>4</td>51 ????????????????????<td>赵六</td>52 ????????????????????<td>20</td>53 ????????????????</tr>54 ????????????????<tr>55 ????????????????????<td>5</td>56 ????????????????????<td>田七</td>57 ????????????????????<td>21</td>58 ????????????????</tr>59 ????????????????<tr>60 ????????????????????<td>6</td>61 ????????????????????<td>庄八</td>62 ????????????????????<td>28</td>63 ????????????????</tr>64 ????????????</tbody>65 ????????</table>66 ????</body>67 </html>

原生JS实现表格的隔行换色

原文地址:https://www.cnblogs.com/baiyiduren/p/9252017.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved