如何在JavaScript中表格单元格的相互比较和测试平等？怎样的indexOf工作？ [英] How to compare cells in JavaScript table to each other and test for equality? How does indexOf work?

问题描述

我在HTML code创建的表。它有9列和13列。它会获得一个JavaScript循环，从几个阵列的人的名字来填充它完全填满。然而，我要添加一个验证步骤，使确保一排内没有两个小区保持相同的值，并且一个每个单元的值不存在于细胞直接重复它的下方。

I created a table in my HTML code. It has 9 columns and 13 rows. It gets filled up completely by a JavaScript loop that fills it with names of people from a few arrays. However, I want to add a validation step that makes sure that no two cells within a row hold the same value and that the value of a each cell does not repeat in the cell directly beneath it.

由于我只能够访问该表作为节点列表的单元格的值，我决定把它变成一个数组使用的IndexOf属性通过阵列搜索：

Since I am only able to access the values of the cells of the table as a NodeList, I decided to make it into an array to use the IndexOf property to search through the array:

var table1 = document.getElementsByTagName("td");
var table1Array = [];    //number of "td" elements on page
for (i = 0; i < 117; i++) {
    table1Array[i] = table1[i].innerHTML;
}

我不知道一个更优雅的方法（初学者的排序这里）。所以，我设置了一些嵌套的循环，以每个单元的每个元素比较排阵创建（适用于所有13行）中：

I don't know of a more elegant method (sort of a beginner here). So I set up some nested loops to compare each cell to each element in the row array I create (for all 13 rows):

function validateCells() {
for (i = 0; i < 117; i = i + 9) { //increment for going to next column (after 9 cells or elements in array)
    for (j = 0; j < 8; j++) {
        var curCell = table1Array[i];
        var curRow = [];         //I'm ignoring the first column which is "date", so it has 8 elements rather than 9
        for (k = 0; k < 8; k++) {
            curRow[k] = document.getElementById("row" + j).children[k].innerHTML;
        }
        if (curRow.indexOf(curCell) != -1) {
            curCell = "CONFLICT"; //trying to change value in table. Doesn't work.
        }
    }
}
}

不幸的是，这是不行的。我甚至不知道是否修改的值在 curCell 引用变量在该位置将真正改变table1Array的价值，如果连少会更改表中的数据。

Unfortunately, this won't work. I don't even know if modifying the value of the curCell reference variable will actually change the value of the table1Array at that location, even less if it will change the data in the table.

我是否正确使用的indexOf财产？难道我用的！=比较运算符或！==？是否返回的indexOf指数为是否有任何其他不太复杂，更优雅的做到这一点？我刚开始使用jQuery，也许它可以帮助简化code，使其更不容易出错。

Am I using the indexOf property correctly? Do I use the != comparison operator or !==? Does indexOf return the index as a Is there any other less complicated, more elegant to do this? I just started with jQuery, maybe it can help simplify the code and make it less error-prone.

很抱歉的所有问题，我真的想了解这一切的作品。谢谢！

Sorry for the all the questions, I'm really trying to understand how all of this works. Thanks!

推荐答案

您可以使用迭代的表行和单元格集合。下面就文本内容的字面比较，你不妨先处理文本方面的空白，以正常化了。

You can use the table rows and cells collections for the iteration. The following does a literal comparison of the text content, you may wish to process the text first to "normalise" it in regard to whitespace.

<table id="t0">
 <tr><td>foo<td>bar<td>fum</td>
 <tr><td>fum<td>bar<td>foo</td>
 <tr><td>foo<td>fum<td>fum</td>
</table>

<script>

compareRows(document.getElementById('t0'));

function compareRows(table) {
  var row, rows = table.rows;
  var cell, cells;
  var rowText;

  // For each row in the table
  for (var i=0, iLen=rows.length; i<iLen; i++) {
    row = rows[i];
    cells = row.cells;

    // Compare the text in each cell
    for (var j=0, jLen=cells.length; j<jLen; j++) {
      cell = cells[j];

      for (var k=0; k<jLen; k++)

        if (k != j && cells[k].textContent == cell.textContent) {
          // cell text is repeated in current row
          console.log('row ' + i + ' cell ' + j + ' text repeated in cell ' + k);
      }

      // Compare with the text in the cell immediately below (if there is one)
      if (i < iLen-2 && cell.textContent == rows[i+1].cells[j].textContent) {
        // cell text is repeated in next row
        console.log('row ' + i + ' cell ' + j + ' text repeated in row ' + (i+1));
      }
    }
  }
}
</script>

请注意，在连续重复的文字将被报告两次。

Note that repeated text in a row will be reported twice.

以上使用的的textContent 的属性，它可以支持作为的的innerText 的一些用户代理。它还可以运行约的快10倍的超过了jQuery替代。

The above uses the textContent property, which may be supported as innerText in some user agents. It also runs about 10 times faster than the jQuery alternative.

这篇关于如何在JavaScript中表格单元格的相互比较和测试平等？怎样的indexOf工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！