首页 > 试题广场 >

点击效果(前端开发卷)

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

热度指数：335 时间限制：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

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)

柠檬酸不？

来个简单易懂的

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 line = this.parentNode.children;
            var column = 0;

            for (var i = 0; i < line.length; i++) {

                if (this == line[i]) {
                    //定位列数
                    column = i;
                }
                line[i].className = "wrap";
            }
            for (var j = column; j < td.length; j = j + line.length) {
                td[j].className = "wrap";
            }


            this.className = "current";

        })

    }
}

发表于 2022-04-18 22:03:44 回复(0)

zekdot

谁能想到不小心ctrl+S直接给我交卷了，少做一题，感觉思路也很简单。

    function bind() {
        let table = document.getElementsByTagName('tbody')[0];
        let m = table.children.length, n = table.children[0].children.length;
        let curY, curX;
        for(let i = 0; i < m; i ++) {
            for(let j = 0; j < n; j ++) {
                let curComp = table.children[i].children[j];
                if(curComp == event.target) {
                    curY = i;
                    curX = j;
                }
                // 复原
                curComp.className = "";
            }
        }
        
        for(let i = 0; i < n; i ++) {
            // 周边
            table.children[curY].children[i].className = "wrap";
        }
        for(let i = 0; i < m; i ++) {
            // 周边
            table.children[i].children[curX].className = "wrap";
        }
        table.children[curY].children[curX].className = "current"
    }

发表于 2022-02-26 19:27:20 回复(0)

cc111111111

主要考的是闭包思想，此时i作为函数参数传入立即执行函数，不会随外部i的变化而变化 
function bind() {
    var td = document.getElementsByTagName("td");
    var tr = document.getElementsByTagName("tr");

    var m = tr.length;
    var n = Math.floor(td.length/m);

    for (var i=0;i<td.length;i++){
      (function(i){
        td[i].onclick = function(){
          console.log(i);
          for (var k=0;k<td.length;k++){
            td[k].className="";
            if (k ==i)
              td[k].className="current";
            else if (Math.floor(k/n)==Math.floor(i/n)||k%n ==i%n){
              td[k].className="wrap";
            }
          }
        };
      })(i);

    }


  }

发表于 2022-01-17 12:04:22 回复(0)

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)