<style>
table {
border-collapse: collapse;
width: 1200px;
height: 500px;
}
table td {
border: 2px solid;
}
</style>
</head>
<body>
<table class="tb2">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
// 或者元素是父元素的第几个孩子
Object.prototype.getnum = function () {
let lists = this.parentElement.children;
for (let i = 0; i < lists.length; i++) {
if (this == lists[i]) {
return i;
}
}
};
// 遍历
Object.prototype.MyEach = function (fn) {
for (let i = 0; i < this.length; i++) {
fn(this[i], i, this);
}
};
let tds1 = document.querySelectorAll(".tb2 td");
let trs1 = document.querySelectorAll(".tb2 tr");
tds1.MyEach((ele) => {
ele.onclick = function () {
// tds1[i] 是父元素的第几个孩子
let num = ele.getnum();
for (let j = 0; j < tds1.length; j++) {
tds1[j].style.background = "";
}
for (let j = 0; j < trs1.length; j++) {
// 排他 : 修改每一行的第num个子元素
trs1[j].children[num].style.background = "red";
}
};
});
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
