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 (这次我使用了按钮......效果更好一点)