目录
(1).声明变量trs,表示所有行数组成的类数组,trs.length=6,表示有六行
(2).声明变量tdnum,表示每一行中有多少列,tdnum=8,表示每一行有八个格子(8列)
(3).声明变量tdsum,定位到该表格中所有的格子,用于之后点击某列,该列显示颜色
(1)跨列显色特点,所属列数相同的格子显示相同颜色,换句话说每一行的某一列显示相同颜色.
(2)那么如何取到每一行中的相同列数? -----for循环
(1)点击哪一列,实现功能用onclick来绑定,将变色封装成一个函数function
一.实现要求:
创建一个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>