Javascript 在上选择高亮显示xy轴上的相关表格单元

我有一张看起来像图表的桌子

快速查看：

如何使此表像区域选择图表一样工作？例如，如果我选择

6

，

元素6的（x，y）是（2，1）

。因此，应突出显示

位置（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

Grids

我知道很少有JS会做出这种行为。任何帮助都能救我一命。

---

这是我的

所以，像其他人一样，我对你试图做的事情感到有点困惑。与你给出的例子似乎不一致。如果要沿x、y轴高亮显示，则与所显示的略有不同。
不管怎样，我把这些放在一起，也许会让你开始：

它实现了图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]] = ''
      }
    }
    }

$scope.box=['1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9']
$scope.boxClass=['cOne'，'cTwo'，'cThree'，'cFour'，'cFive'，'cSix'，'cSeven'，'cEight'，'cNine']
$scope.box.reverse（）；
console.log（$scope.box）
$scope.findChecked=函数（）{
对于（变量i=0；i<$scope.box.length；i++）{
如果（$scope[$scope.box[i]]））{
$scope.currentBox=9-i
console.log（$scope.currentBox）
打破
}
} 
对于（变量x=0；x<$scope.boxClass.length；x++）{
如果（x<$scope.currentBox）{
$scope[$scope.boxClass[x]]=“选中”
}否则{
$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';
    }
  }

var row1=['cOne'，'cTwo'，'cThree']；
var row2=['cFour'，'cFive'，'cSix']；
var row3=['CS偶'、'cEight'、'cNine']；
var col1=['cOne'，'cFour'，'cSeven']；
var col2=['cTwo'，'cFive'，'cEight']；
var col3=['cThree'，'cSix'，'cNine']；
变量行=[row1，row2，row3]；
var cols=[col1，col2，col3]；
$scope.setXY=函数（x，y）{
console.log（x，y）
变量i=0，z=0；
对于（i=0；i

---

（这次我使用了按钮…效果更好）

图表表中有两个“6”，因此不清楚示例中突出显示6,4,3,0,1,2的逻辑。抱歉，我刚刚更新了我不太理解您的逻辑。。由于选择基于最小面积标准，为什么选择

0,1,2

而不是

2,6,9

时会突出显示

2

？这同样适用于

6

（

6,2

或

6,9

而不是

6,4,3,0,1,2

）。对不起，我的英语很慢，但是。我的意思是它会工作，因为xy轴0是这里的中心，所以2在x轴上。2没有y轴。希望这能有所帮助。我对@kidA的理解是一致的。我想你需要解释清楚一点。选择2时，可能会显示一些突出显示的内容的更多图片。在我看来，如果你选择2，2，6和9将会被选择，因为它有一个y轴。它的上弦是你的答案。这更接近我想要的。我想说的是：黑点是网格点，红色是面积。这是我的主要概念。好的，我明白了。但是对于这样一个小网格，它有很多用处吗？基本上，你想要它画一个从0,0到任意坐标的矩形。是的！现在我可以让别人理解了：）看看我更新的答案。它沿x、y方向高亮显示。不完全是你想做的，但你现在应该有足够的时间自己去弄清楚。