要求:1.跨列显示颜色 2.点击哪一列哪一列显示颜色

发布于:2022-11-09 ⋅ 阅读:(19) ⋅ 点赞:(0) ⋅ 评论:(0)

目录

一.实现要求:

二.代码实现步骤:

 1.变量声明

(1).声明变量trs,表示所有行数组成的类数组,trs.length=6,表示有六行

(2).声明变量tdnum,表示每一行中有多少列,tdnum=8,表示每一行有八个格子(8列)

(3).声明变量tdsum,定位到该表格中所有的格子,用于之后点击某列,该列显示颜色

​编辑

2.实现跨列显色

(1)跨列显色特点,所属列数相同的格子显示相同颜色,换句话说每一行的某一列显示相同颜色.

(2)那么如何取到每一行中的相同列数?  -----for循环

3.实现点击哪一列,哪一列显示颜色.

(1)点击哪一列,实现功能用onclick来绑定,将变色封装成一个函数function

(2)点击哪一列,如何让那一列所有的格子变色?


一.实现要求:

        创建一个6行8列的表格table>tr*6>td*8,要求跨行显示颜色,并且点击哪一列,那一列全部的格子显示颜色.

二.代码实现步骤:

 1.变量声明

(1).声明变量trs,表示所有行数组成的类数组,trs.length=6,表示有六行

 let trs = document.querySelectorAll("tr");

 

(2).声明变量tdnum,表示每一行中有多少列,tdnum=8,表示每一行有八个格子(8列)

let tdnum = document.querySelector("tr").children.length;

(3).声明变量tdsum,定位到该表格中所有的格子,用于之后点击某列,该列显示颜色

let tdsum = document.querySelectorAll("td");

 

2.实现跨列显色

(1)跨列显色特点,所属列数相同的格子显示相同颜色,换句话说每一行的某一列显示相同颜色.

(2)那么如何取到每一行中的相同列数?  -----for循环

    for (let i = 0; i < trs.length; i++) {
        let tds = trs[i].children;
        console.log(trs[i]);
        for (let j = 0; j < tdnum; j++) {
             if (j % 2 == 0) {
                    tds[j].style.backgroundColor = "pink";
             } else {
                    tds[j].style.backgroundColor = "";
             }
        }
    }

        第一层for循环表示行数,定位到每一行,其中trs[ i ]表示第i行,每一行有八个子元素(td),声明变量tds表示该行对应的所有列元素(td).

        第二层for循环表示列数,用j表示列数,用tds[ j ]表示第 j 列.

         让每一行的奇数列(td)显示粉色,偶数列无背景颜色.

        注意!!!!!这里的列(tds)下标是从0开始的,第1.3.5.7列的下标分别是0.2.4.6,所以用 j%2==0来判断是否为奇数列.

         这里的判断用的 if 语句,如果为奇数列则显示粉色,偶数列无背景颜色.

实现效果如下

 

3.实现点击哪一列,哪一列显示颜色.

(1)点击哪一列,实现功能用onclick来绑定,将变色封装成一个函数function

tds[j].onclick = function () {}

 注意!!!!!点击哪一列,这个还是嵌套在上面代码的第二层for循环里面,j表示第几列的意思

(2)点击哪一列,如何让那一列所有的格子变色?

        通过观察,一共有6行,每一行有8个格子,一共有48个格子.

        48个格子(td),也就是我们所定义的类数组变量tdsum(目录1.(3))中.如果要提取每一行相同列,他们所属的第几个格子数(td)除以8的余数都是相等的.8为tdnum的值

        如果还没懂我们举个简单的例子,比如我们绑定第一列,他们在类数组变量tdsum中的下标为0,8,16,24,32,40,他们余8都是等于0,同样的道理绑定其它列.

        我们用for循环,取出tdsum中的所有td下标值(0~47),点击某一列,该列显示颜色,该列中所有td在tdsum中的下标值余8都相同.其余列的所有格子不显示背景颜色.

         tds[j].onclick = function () {
             for (let k = 0; k < tdsum.length; k++) {
                   if (k%tdnum == j) {
                            tdsum[k].style.backgroundColor = "red";
                   } else {
                            tdsum[k].style.backgroundColor = "";
                    }
              }
         }

实现效果如下:

 三.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            text-align: center;
        }
    </style>
</head>

<body>
    <table border="1px" width="800px" height="300px" cellspacing="0" line-height="50">
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
            <td>1.6</td>
            <td>1.7</td>
            <td>1.8</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            <td>2.5</td>
            <td>2.6</td>
            <td>2.7</td>
            <td>2.8</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
            <td>3.6</td>
            <td>3.7</td>
            <td>3.8</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td>4.4</td>
            <td>4.5</td>
            <td>4.6</td>
            <td>4.7</td>
            <td>4.8</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
            <td>5.4</td>
            <td>5.5</td>
            <td>5.6</td>
            <td>5.7</td>
            <td>5.8</td>
        </tr>
        <tr>
            <td>6.1</td>
            <td>6.2</td>
            <td>6.3</td>
            <td>6.4</td>
            <td>6.5</td>
            <td>6.6</td>
            <td>6.7</td>
            <td>6.8</td>
        </tr>
    </table>
    <script>
        let trs = document.querySelectorAll("tr");
        let tdnum = document.querySelector("tr").children.length;
        let tdsum = document.querySelectorAll("td");
        console.log(trs);
        console.log(tdnum);
        console.log(tdsum);
        for (let i = 0; i < trs.length; i++) {
            let tds = trs[i].children;
            console.log(trs[i]);
            for (let j = 0; j < tdnum; j++) {
                if (j % 2 == 0) {
                    tds[j].style.backgroundColor = "pink";
                } else {
                    tds[j].style.backgroundColor = "";
                }
                tds[j].onclick = function () {
                    for (let k = 0; k < tdsum.length; k++) {
                        if (k%tdnum == j) {
                            tdsum[k].style.backgroundColor = "red";
                        } else {
                            tdsum[k].style.backgroundColor = "";
                        }
                    }
                }
            }
        }      
    </script>
</body>

</html>