首页 > 试题广场 >

点击效果(前端开发卷)

[编程题]点击效果(前端开发卷)

热度指数：334 时间限制：C/C++ 3秒，其他语言6秒空间限制：C/C++ 256M，其他语言512M
算法知识视频讲解

界面中存在id=jsContainer的节点A，系统会随机生成id为jsLayout的 m行 x n列表格(m >= 3, n >= 3)，并随机选中一个td节点，请按照如下需求实现bind函数
1、bind 函数为每个td节点绑定click事件，当某个td节点被点击时class变为current，同时以该td为中心的同一行和同一列td节点class变为wrap，具体效果参考以下图片
2、每次click后，请清空所有不需要变动的td节点的class
3、请不要手动调用bind函数
4、当前界面为系统生成 9 * 9 表格，执行 bind 函数，并点击其中td后的效果
5、请不要手动修改html和css
6、不要使用第三方插件

算法知识视频讲解

JavaScript

牛客538022010号

先获取td的列数，点击的时候就需要找到同一行的td和同一列的td

同一行：判断当前td索引/列数是否与被点击的td/列数相等

同一列：判断当前td索引%烈数是否与被点击的td%列数相等

function bind() {
    consttds = document.getElementsByTagName('td'),
          trs = document.getElementsByTagName('tr'),
          m = trs.length,
          n = Math.round(tds.length / m);
    for(let i = 0; i < tds.length; i++) {
        tds[i].onclick = () => {
            for(let j = 0; j < m * n; j++) {
                tds[j].className = '';
                if(i == j) {
                    tds[j].className = 'current';
                }
                if((Math.floor(j / n) == Math.floor(i / n) || i % n == j % n) && j != i) {
                    tds[j].className = 'wrap'
                }
            }
        }
    }
}

发表于 2021-11-16 12:53:02 回复(0)

JavaScript

Williammm

function bind() {
    var tr = document.querySelectorAll('tr')
        var td =document.querySelectorAll('td') 
        for(var i=0;i<td.length;i++){
            td[i].addEventListener('click',function(){
                for(var i =0;i<td.length;i++){
                    td[i].className =""
                }
                var trC = this.parentNode.children
                for(var i =0;i<trC.length;i++){
                    trC[i].className="wrap"
                }
                for(var i = 0;i<tr.length;i++){
                    tr[i].children[this.cellIndex].className="wrap"
                }
                this.className="current"
            })
            
        }
}

一开始居然不知道有cellIndex这个属性。。。

发表于 2021-08-24 14:21:11 回复(0)