前端吧 关注：224,519贴子：1,390,149
一个人睡觉
不感兴趣
开通SVIP免广告
不感兴趣
开通SVIP免广告
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>javascript</title>
<style>
.current {
background-color: pink;
color: #fff;
}
</style>
</head>
<body>
<table class="tab-demo" border="1" width="200" height="100">
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</tbody>
</table>
<script>
// 比如九宫格 我点击5(或者2或者8) 然后2 5 8格子变颜色？
const oTagTr = document.querySelectorAll('table.tab-demo tr');
for (let i = 0; i < oTagTr.length; i++) {
const oTagTd = oTagTr[i].querySelectorAll('td');
for (let j = 0; j < oTagTd.length; j++) {
oTagTd[j].onclick = () => {
for (let i = 0; i < oTagTr.length; i++) {
const oTagTd = oTagTr[i].querySelectorAll('td');
for (let k = 0; k < oTagTd.length; k++) {
oTagTd[k].className = k === j ? 'current' : '';
}
}
};
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>javascript</title>
<style>
.current {
background-color: pink;
color: #fff;
}
</style>
</head>
<body>
<table class="tab-demo" border="1" width="200" height="100">
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</tbody>
</table>
<script>
// 比如九宫格 我点击5(或者2或者8) 然后2 5 8格子变颜色？
const oTagTr = document.querySelectorAll('table.tab-demo tr');
for (let i = 0; i < oTagTr.length; i++) {
const oTagTd = oTagTr[i].querySelectorAll('td');
for (let j = 0; j < oTagTd.length; j++) {
oTagTd[j].onclick = () => {
for (let i = 0; i < oTagTr.length; i++) {
const oTagTd = oTagTr[i].querySelectorAll('td');
for (let k = 0; k < oTagTd.length; k++) {
oTagTd[k].className = k === j ? 'current' : '';
}
}
};
}
}
</script>
</body>
</html>
不感兴趣
开通SVIP免广告
