一、点击表格列变色

1、html,CSS代码

2、JS代码

3、效果图

编辑编辑

二、让表格的偶数排变色

1、JS代码

2、效果图

编辑

三、点击表格的行让其变色

1、JS代码

2、效果图

一、点击表格列变色

1、html,CSS代码

    <style>table,td,tr{border: 1px solid;}tr{}td{width: 100px;height: 100px;}</style><table id="tb" cellspacing="0"><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></tbody></table>

2、JS代码

      //先设计一个函数，得到每一个td在tr中的位置Object.prototype.inof1=function(){var arr=this.parentElement.childrenfor(let i=0;i<arr.length;i++)if(arr[i]==this){return i}}var tb=document.getElementById("tb") var trs=document.querySelectorAll("tr") //获取tr元素var tds=document.querySelectorAll("td") //获取td元素for(let i=0;i<tds.length;i++){ //遍历每一个td元素tds[i].onclick=function(){  //给每一个td元素绑定 点击事件tds.forEach(element => {element.style.backgroundColor="white" //让所有td变为白色});let x=tds[i].inof1() //调用函数，得到当前td在tr中的位置trs.forEach(el=>{el.children[x].style.backgroundColor="red" //让所有tr中当前td的位置全部变为红色，也就是当前td所在的一竖列变红} )}}

3、效果图

点击任意一个单元格，会自动使该单元格所在位置的一竖列单元格变红

二、让表格的偶数排变色

CSS、HTML代码一致

1、JS代码

        var tb=document.getElementById("tb") var trs=document.querySelectorAll("tr") //获取tr元素var tds=document.querySelectorAll("td") //获取td元素trs.forEach((element,index) => {if(index%2==1){ //判断tr为偶数时执行操作trs[index].style.backgroundColor="red" //让tr变红色}});

2、效果图

三、点击表格的行让其变色

CSS、HTML代码如上

1、JS代码

        var trs=document.querySelectorAll("tr") //获取tr元素for(let i=0;i<trs.length;i++){ //遍历每一行trs[i].onclick=function(){ //绑定事件trs.forEach(element => {element.style.backgroundColor="white" });trs[i].style.backgroundColor="red"}}

2、效果图

点击表格列变色，让表格的偶数排变色，点击表格的行让其变色相关推荐

php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码，类似于桌面程序中的表格拖动 - phpStudy...
JQuery拖动表头边框线调整表格列宽效果代码类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放 ...
表格列展示自动扩展_进步一点点：excel表格常规操作也能很快捷
Excel 表格概述官方解释:若要更轻松地管理和分析一组相关数据, 您可以将单元格的范围转换为 excel 表格. 这里所说的excel表格,并不是指我们直接看到的那些单元格,而是指经转换过后的表格 ...
DevExpres表格控件运行时动态设置表格列
本文是系列文章,陆续发表于电脑编程技巧与维护杂志. DevExpres产品是全球享有极高声誉的一流控件套包产品!国内典型用户包括:用友.金蝶.神州数码.工信部.中国石化.汉王科技等众多大中型科技型企业 ...
Docsify Markdown表格列宽自定义
设置表格容器样式 table {display: table !important;width: 100%; } 自定义marked renderer window.$docsify = {name: ...
layui表格列动态显示或隐藏
问题描述:多个功能使用同一个页面时,有时要求不同的功能中展示的表格列数据不同,这就需要动态设置表格列的显示或隐藏. 解决方案:layui渲染表格数据后有个完成的回调函数,在回调函数中根据你的逻辑条件动 ...
miniui单元格点击弹框_miniui 给表格行添加监听事件的几种方法以及点击某列列名数据不能排序的问题...
最近在使用miniui框架做开发,在做表格行的点击监听事件中发现了几个属性,都可以起到监听效果但是执行的结果却大有不同.好了废话不多说,直接上代码. autoload="true" ...
bootstrap表格某一列值相同时_Bootstrap-table实现动态合并相同行(表格同名合并)
有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并.要是不是相同的就不合并.如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成的(只需要计 ...
el-drawer点击的时候为什么有边框_80%人都有的表格强迫症怎么破，一招教你自动添加表格边框...
相信对于许多朋友来讲,在使用Excel的时候都会有一个强迫症,那就是新增表格数据的时候,一定会重新添加一次表格边框.如果某些数据每月边框,心里面就会显得非常别扭.今天我们就来学习一下,如何在新增数据的 ...
SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍
这是 Jerry 2021 年的第 37 篇文章,也是汪子熙公众号总共第 313 篇原创文章. Jerry 之前的文章一个 SAP 开发工程师十余年的技术写作之路回顾曾经提到,知乎上安晓辉老师的一 ...

点击表格列变色，让表格的偶数排变色，点击表格的行让其变色

一、点击表格列变色

1、html,CSS代码

2、JS代码

3、效果图

二、让表格的偶数排变色

1、JS代码

2、效果图

三、点击表格的行让其变色

1、JS代码

2、效果图

点击表格列变色，让表格的偶数排变色，点击表格的行让其变色相关推荐

最新文章

热门文章

点击表格列变色，让表格的偶数排变色，点击表格的行让其变色

一、点击表格列变色

1、html,CSS代码

2、JS代码

3、效果图

二、让表格的偶数排 变色

1、JS代码

2、效果图

三、点击表格的行让其变色

1、JS代码

2、效果图

点击表格列变色，让表格的偶数排变色，点击表格的行让其变色相关推荐

最新文章

热门文章

二、让表格的偶数排变色