用JS点击实现一个跨行/跨列显示的效果

一、目标样式

1、实现偶数行显色

2、在点击之后，希望被点击那一行都显色

3、实现偶数列显色

4、在点击之后，希望被点击单元格的那一列都显色（这里随机点的第三列）（实则下标为2）

二、分析

要实现跨行显示，可以通过选择的那一行，遍历行标签就可以实现

要实现跨列显示，因为没有列标签，所有只能先通过选中每一行的单元格，再去寻找单元格的父级（行标签），然后遍历行标签，选中每一行里面的对应单元格，让那一行的单元格都显色。

三、代码实现

1、表格部分：

 <table border="1px" cellspacing="0px" style="height:300px;width: 800px;"><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
//想要几行几个单元格可以自己添加

2、js偶数行显色效果部分:

 let rows = document.querySelectorAll("tr");for (let i = 0; i < rows.length; i++) {//偶数行显示if (i % 2 == 0) {rows[i].style.backgroundColor = "pink";}}

3、js点击跨行显示效果部分：要先获取每一行，然后我们要使用排他设计思想，先将所有的行的背景颜色都设置为白色，然后被点击单元格那一列设置为其他颜色

//跨行显色：获取所有行，偶数行显示//点击哪一行哪一行变色
let rows = document.querySelectorAll("tr");
for (let i = 0; i < rows.length; i++) {//设置点击功能rows[i].onclick = function () {//排他for (let j = 0; j < rows.length; j++) {rows[i].style.backgroundColor = "white";}//设置自己rows[i].style.backgroundColor = "pink";}}

4、js偶数列显色效果部分：

 //跨列显色,偶数行显色let trs = document.querySelectorAll("tr");for (let i = 0; i < trs.length; i++) {  //行let tds = trs[i].children;//选择每一行里面的单元格for (let j = 0; j < tds.length; j++) { //单元格//偶数列显色if (j % 2 == 0) {tds[j].style.backgroundColor = "pink";}}}

5、js实现点击单元格显示跨列效果部分：

要先获取每一行和每一个单元格，然后我们要使用排他设计思想，先将所有的单元格的背景颜色都设置为白色，然后被点击单元格那一列设置为其他颜色

 //跨列显色,偶数行显色let trs1 = document.querySelectorAll("tr");let tds1 = document.querySelectorAll("td");//获取所有单元格来判断for (let i = 0; i < tds1.length; i++) {//设置点击单元格tds1[i].onclick = function (){ //排他for(let j=0;j<tds1.length;j++){tds1[j].style.backgroundColor="white";}//设置自己let newindex=tds1[i].index();//找到点击的单元格位于这一行的第几个，再调用找下标的方法找到所在位置 console.log(newindex);//打印看看位于当前行的第几个for(let k=0;k<trs1.length;k++){//找到行，然后对应行里面的单元格的下标，使之变色trs1[k].children[newindex].style.backgroundColor="pink";//被点击的列变色}}}

想要找到被点击任意单元格的下标，我们可以用这个模板对象封装的方法实现这个功能：

 //模板对象：找我们想要的下标Object.prototype.index = function () {let sons = this.parentElement.children;//this指向点击的单元格for (let i = 0; i < sons.length; i++) {if (sons[i] == this) {return i}}}

用JS点击实现一个跨行/跨列显示的效果相关推荐

latex表格分行跨行跨列
某个表格的单元格中文字太长需要分行显示的方法如分成3行显示添加命令 -------- \newcommand{\tabincell}[2]{\begin{tabular}{@{}#1@{}} ...
table标签、表格的跨行跨列、ifarme标签
table标签需求: 制作一个带表头的三行山列的表格,并显示边框:修改表格的宽度.高度.表格的对齐方式.单元格间距. <!DOCTYPE html> <html lang=&quo ...
EasyUI Datagrid跨行跨列的需求
常规开发后台管理系统中遇到的列表查询,都是用到最基本的数据网格,不包括单元格合并,多列页眉,冻结列和页脚等需求.类似如下这个列表实现也很简单,引入相关的js.css文件,html标签定义展示的列,通 ...
php表格最后一行跨列合并,php动态实现表格跨行跨列实现代码
php动态实现表格跨行跨列实现代码发布于 2015-01-28 14:56:14 | 203 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext P ...
小程序跨行跨列多列复杂表格实现
今天来实现个跨行跨列多列表格. 如图,这是个列数不确定,有的单元格还要跨行跨列的复杂表格. 这里暂时最多支持4列,列数再多就放不下了. 实现原理实现原理比较简单,通过多个嵌套的循环将数据取出. 上面 ...
java使用poi读取跨行跨列excel
java使用poi读取跨行跨列excel 1.需求背景 2.实现思路分析 3.重要代码片码说明 4.完整的代码类如下: 5.完整的demo代码提供如下 6.demo执行结果 1.需求背景最近有一个工 ...
【尚硅谷 Java Web 笔记】表格的跨行跨列
colspan 属性设置跨列 rowspan 属性设置跨行 <!DOCTYPE html><html lang="en"><head><m ...
JAVA对excle创建、读取、设置单元格颜色、背景色、跨行跨列
pom.xml依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</a ...
HTML-表格跨行跨列
HTML-表格跨行跨列 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/ ...

用JS点击实现一个跨行/跨列显示的效果

用JS点击实现一个跨行/跨列显示的效果相关推荐

最新文章

热门文章