使用javascript在html表中查找3的匹配项？

我有这个HTML表格：

<table width="100%">
    <tr>
        <td>1</td>
        <td>3</td>
        <td>2</td>
        <td>1</td>
    </tr>

     <tr>
        <td>1</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>

     <tr>
        <td>1</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>

     <tr>
        <td>3</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
</table>

1.
3.
2.
1.
1.
4.
4.
4.
1.
4.
4.
4.
3.
2.
2.
2.

我试图在水平或垂直方向上找到3个相同数字的匹配项。我想写一个函数，检查它们是否匹配，并突出显示匹配的单元格，例如333或444等

首先，我将文档中的所有td元素放入一个数组中：

var cellBlocks = document.getElementsByTagName("td");

for( i = 0; i < cellBlocks.length; i++){
    console.log("looking for matches");
}

var cellBlocks=document.getElementsByTagName（“td”）；
对于（i=0；i

我试图解决这个问题，但不知道从哪里开始

---

jsiddle here:

表上需要一个id标记。使用类似以下内容：

  var table = document.getElementById("the_table"), row, cell, content;
  for (var j=0;j<table.rows.length;j++) {
    row = table.rows[j];
    for (i=0;i<row.cells.length;i++) {
       cell = row.cells[i];
       content = cell.innerHTML;
       do whatever
    }
  }

var table=document.getElementById（“the_table”），行、单元格、内容；
对于（var j=0；j首先，我将表格转换为二维数组来表示网格。每个项目都是一个包含单元格的对象。为此，我获取所有行，然后获取每行的所有单元格

var rows = document.getElementsByTagName("tr");
var matchAim = 3;

var data = [];

for( var i = 0; i < rows.length; i++){
    var rowData = [];
    var cellBlocks = rows[i].getElementsByTagName("td");

    for( var j = 0; j < cellBlocks.length; j++){
        var cellBlock = cellBlocks[j];
        rowData.push(cellBlock);
    }

    data.push(rowData);
}

然后我调用水平和垂直的
checkForMatches

如果有更多的时间，我相信我可以对代码进行更多的改进，使其更干净一些，但是代码是功能性的，它假设表的宽度和高度相同

jsfiddle：

function checkForMatches(isHorizontal) {
    console.debug('Checking matches ' + (isHorizontal ? 'horizontally' : 'vertically'));
    for (var k = 0; k < data[0].length; k++) {
        var currentNumber;
        var matchCount = 1;

        for (var l = 0; l < data.length; l++) {
            var cellBlock = isHorizontal ? data[k][l] : data[l][k];
            var cellNumber = cellBlock.innerText;
            if (!currentNumber || currentNumber !== cellNumber) {
                if (matchCount >= matchAim) {
                    var horizontalIndex = isHorizontal ? l: k;
                    var verticalIndex = isHorizontal ? k : l
                    changeColorForMatch(matchCount, isHorizontal, horizontalIndex, verticalIndex);
                }

                currentNumber = cellNumber;
                matchCount = 1;
            }
            else {
                matchCount++;
            }
        }

        if (matchCount >= matchAim) {
            var horizontalIndex = isHorizontal ? data.length: k;
            var verticalIndex = isHorizontal ? k : data.length;
            changeColorForMatch(matchCount, isHorizontal, horizontalIndex, verticalIndex);
        }
    }
}

function changeColorForMatch(matchCount, isHorizontal, horizontalIndex, verticalIndex) {

    for (var i = matchCount; i > 0; i--) {
        var cellBlock = isHorizontal ? data[verticalIndex][horizontalIndex - i] : data[verticalIndex - i][horizontalIndex];

        cellBlock.style.backgroundColor = 'red';
    }
}