javascript - 在 xy 轴上选择突出显示相关的表格单元格

Question

我有一个看起来像图表的表格。

快速查看:

如何使此表像区域选择图一样工作？例如，如果我选择 6 , the (x, y) of element 6 is (2, 1) .所以最小相关区域包括元素在positions (0,0), (0,1), (1,0), (1,1), (2,0), (2,1)应该突出显示。因此，网格 '0,3,1,4,2,6'将突出显示。像这样:

同样，

-如果我选择 3它将突出显示 0,3网格

-如果我选择 2，它将突出显示 0,1,2网格

我对执行此类操作的 JS 知之甚少。任何帮助都会挽救我的一天。这是我的 plunker

Answer 1

因此，与其他人一样，我对您的尝试感到有些困惑。似乎与您提供的示例不一致。如果您想沿 x、y 轴突出显示，那么它会与您显示的略有不同。
不管怎样，我把它放在一起，也许它会让你开始:

Plunker

它执行图片 1 和 3 中显示的操作，但不是图片 2。

  $scope.boxes = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']
  $scope.boxClass = ['cOne', 'cTwo', 'cThree', 'cFour', 'cFive', 'cSix', 'cSeven', 'cEight', 'cNine']

  $scope.boxes.reverse();
  console.log($scope.boxes)

  $scope.findChecked = function () {
    for (var i = 0; i < $scope.boxes.length; i++){
      if ($scope[$scope.boxes[i]]) {
        $scope.currentBox = 9 - i
        console.log($scope.currentBox)
        break;
      }
    } 
    for (var x = 0; x < $scope.boxClass.length; x++) {
      if (x < $scope.currentBox) {
        $scope[$scope.boxClass[x]] = 'checked'
      } else { 
        $scope[$scope.boxClass[x]] = ''
      }
    }
    }

如果你想沿着 x,y 坐标高亮显示，你可以这样做:

  var row1 = ['cOne', 'cTwo', 'cThree'];
  var row2 = ['cFour', 'cFive', 'cSix'];
  var row3 = ['cSeven', 'cEight', 'cNine'];
  var col1 = ['cOne', 'cFour', 'cSeven'];
  var col2 = ['cTwo', 'cFive', 'cEight'];
  var col3 = ['cThree', 'cSix', 'cNine'];

  var rows = [row1, row2, row3];
  var cols = [col1, col2, col3];

  $scope.setXY = function(x, y) {
    console.log(x, y)
    var i = 0, z = 0;
    for(i = 0; i < rows.length; i++) {
      for(z = 0; z < rows[i].length; z++) {
        $scope[rows[i][z]] = '';
        $scope[cols[i][z]] = '';
      }
    }

    for(i = 0; i < 3; i++) {
      $scope[rows[y][i]] = 'checked';
      $scope[cols[x][i]] = 'checked';
    }
  }

Plunker (这次我使用了按钮……效果更好一些)