在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

虽然不是图片2，但是如图1和图3所示。

  $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（我这次使用按钮......效果更好）