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

Question

我有这个 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>

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

我首先获取文档中的所有 td 元素并将它们放入一个数组中：

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

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

我已经尝试解决问题，但不知道从哪里开始。

jsfiddle 在这里：http://jsfiddle.net/k898mhfy/

Answer 1

table 上需要一个 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
    }
  }

您还可以使用 table.rows[zz].cells[ww].innerHTML 作为数组。如果单元格中有其他元素，则需要使用 childNodes。

Answer 2

首先，我将 table 转换为二维数组来表示网格。每个项目都是一个包含单元格的对象。我通过获取所有行然后为每一行获取所有单元格来做到这一点；

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 来检查水平或垂直匹配。找到匹配项后，changeColorForMatch 函数循环遍历数组并更改单元格的颜色：

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';
    }
}

然后我为水平和垂直调用 checkForMatches。

如果再给我一些时间，我确定我可以进一步改进代码以使其更简洁一些，但代码可以正常运行。它假定 table 的宽度与高度相同。

jsfiddle: http://jsfiddle.net/7mf182gw/2/

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

Finding matches of 3 across a html table using javascript?

html

javascript