javascript - 如何比较 JavaScript 表格中的单元格并测试是否相等？ indexOf 是如何工作的？

Question

我在 HTML 代码中创建了一个表格。它有 9 列和 13 行。它被 JavaScript 循环完全填满，该循环用几个数组中的人名填充它。但是，我想添加一个验证步骤，以确保一行中没有两个单元格具有相同的值，并且每个单元格的值不会在其正下方的单元格中重复。

由于我只能以 NodeList 的形式访问表单元格的值，因此我决定将其放入数组中，以便使用 IndexOf 属性来搜索数组:

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 行):

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 的值，更不知道是否会更改表中的数据。

我是否正确使用了indexOf属性？我应该使用 != 比较运算符还是 !==？ indexOf 是否将索引返回为 a 是否还有其他更简单、更优雅的方法可以做到这一点？我刚刚开始使用 jQuery，也许它可以帮助简化代码并减少出错的可能性。

很抱歉提出所有问题，我真的很想了解这一切是如何运作的。谢谢!

Answer 1

您应该得到一个行数组，每行都是一个单元格数组。这样验证就容易多了。我不确定你想如何展示冲突。在这个演示中，我只是用红色突出显示了重复的单元格(冲突的)(至少我喜欢这种显示冲突而不是修改冲突单元格的文本)。

HTML:

<table>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>5</td><td>6</td></tr>
  <tr><td>7</td><td>8</td><td>7</td></tr>
  <tr><td>8</td><td>9</td><td>10</td></tr>
</table>
<button>Check constraints</button>

CSS:

td {
  width:100px;
  height:50px;
  border:1px solid black;
}
table {
  border:1px solid black;
  border-collapse:collapse;
}
td.invalid {
  background:red;
}

JS:

$('td').attr('contenteditable',true);
var cell;     
function highlight(){    
  $(arguments).toggleClass('invalid',true);
}
function checkConstraints(e){
  //reset style before re-checking
  $('td.invalid').toggleClass('invalid');
  //get rows as an array of array
  var rows = $('tr').map(function(elem,i){
      return [$(this).children('td').toArray()];
  }).toArray();        
  //loop through the rows
  for(var i = 0; i < rows.length; i++){
    cell = {};        
    for(var j = 0; j < rows[i].length; j++){
        var cellText = $(rows[i][j]).text();
        if(cell[cellText]) {  
            highlight(cell[cellText], rows[i][j]);                
        } else {
            cell[cellText] = rows[i][j];
        }
        if(i < rows.length - 1 && 
           cellText == $(rows[i+1][j]).text()){
           highlight(rows[i][j],rows[i+1][j]);
        }            
    }        
  }
}
$('button').click(checkConstraints);

Demo.

请注意，我为所有单元格设置了 contenteditable (td)，您可以将单元格文本编辑为您想要的内容，然后单击按钮来测试演示。