原生js实现table表格的各行变色功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>原生js实现各行变色</title><style>*{margin:0;padding:0;}#studentCore{width:300px;margin:0 auto;}table{border-collapse: collapse;}td,th{text-align: center;padding:3px 5px;border:1px solid #ccc;}th{background-color: lightsteelblue;}.hightLight{background-color: pink;}</style>
</head>
<body οnlοad="setTableColor()"><div id="studentCore"><table><thead><tr><th>Sname</th><th>Score</th></tr></thead><tbody><tr><td>明明</td><td>50</td></tr><tr><td>静静</td><td>60</td></tr><tr><td>日日</td><td>65</td></tr><tr><td>李磊</td><td>70</td></tr><tr><td>韩梅梅</td><td>75</td></tr><tr><td>杨幂</td><td>80</td></tr><tr><td>范冰冰</td><td>85</td></tr></tbody></table>
</div><script src="js/jquery-3.2.1.min.js"></script>
<!--方法一-->
<script>var data=document.getElementById("studentCore");var trs=data.querySelectorAll("tbody>tr");console.log(trs);for (var i=0;i<trs.length;i++){i%2!=0&&(trs[i].className="hightLight");}
</script>
<!--方法二-->
<script>function setTableColor() {var data=document.getElementById("studentCore");var trs=data.getElementsByTagName("tr");for(var i=0;i<trs.length;i++){var j=i+1;if(j%2==0){trs[i].style.background="pink";}else{trs[i].style.background="yellow";}}}setTableColor();
</script>
</body>
</html>

转载于:https://www.cnblogs.com/yingleiming/p/7802772.html

原生js实现table表格的各行变色功能相关推荐

原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
原生js实现table 横向纵向全选功能
要实现这种功能,很明显用elment ui实现不了.element ui 纵向需要prop名字不一样才能展示,很明显,我这个一层二层是名字一样的数组期望后台返回数组是这种格式. 所有需要自己用ta ...
原生的HTML Table表格实现表头添加斜杠
原生的HTML Table表格实现表头添加斜杠其实就是实现类似的这样一个功能,但是呢,方式很多,有的要固定长宽,有的要固定大小,有的要写JS,有的要用动画,很费劲,然后从网上找了一个demo,稍微改 ...
php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章先看一张效果图思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能
JS实现table表格内针对某列内容进行即时搜索筛选功能发布时间:2020-08-29 09:26:37 来源:脚本之家阅读:103 作者:Marx-link 本文实例讲述了JS实现table表格 ...
html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
用html向表格插入新行,js向table表格中插入添加新行和选择删除行
js向table表格中插入添加新行和选择删除行-综合特效-网页特效-站长新动力-msxindl.com #tab{ width:50%; } #tab td{ height:2em; text-ali ...
【每日一练】原生js仿淘宝主图放大镜功能，附学习源码
在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...
原生js实现动态表格分页(封装版)
之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的. 后台动态获取数据进行渲染,等页面渲染成功之后在进行分页.数据的获取我用的vue,也可以用ajax等其他 ...

原生js实现table表格的各行变色功能

原生js实现table表格的各行变色功能相关推荐

最新文章

热门文章