javascript - 由于 Uncaught Error ，表中的元素未被读取

Question

我对我正在从事的一个项目感到非常沮丧，在该项目中，如果表中有重复的元素，我想隐藏它们。我发现重复项没有问题。当我尝试隐藏重复项时，问题就开始了。我使用的是普通 JavaScript，没有任何框架或库。我收到这个错误，确实很难破译。

Uncaught Type Error: Cannot read property 'e' of undefined

e 是表中的第一个重复元素

我的 HTML 中没有任何硬编码数据 - 全部都是 JavaScript。我以前从未以这种方式做过展示，所以我想我会寻求一些帮助。我的代码如下。

提前感谢您的帮助。

var data = [
  ['e', 0, 1, 2, 3, 4],
  ['a', 54312, 235, 5, 15, 4],
  ['a', 6, 7, 8, 9, 232],
  ['a', 54, 11235, 345, 5, 6],
  ['b', 0, 1, 2, 3, 4],
  ['b', 54312, 235, 5, 15, 4],
  ['c', 62, 15, 754, 93, 323],
  ['d', 27, 11235, 425, 18, 78],
  ['d', 0, 1, 2, 3, 4],
  ['d', 54312, 235, 5, 15, 4],
  ['e', 6, 7, 8, 9, 232],
  ['e', 54, 11235, 345, 5, 6],
  ['e', 0, 1, 2, 3, 4],
  ['e', 54312, 235, 5, 15, 4],
  ['e', 62, 15, 754, 93, 323],
  ['e', 27, 11235, 425, 18, 78]
];





//Create a HTML Table element.
var table = document.createElement("TABLE");
var elems = document.getElementsByClassName("tableRow");


//Get the count of columns.
var columnCount = data[0].length;


//Add the data rows.

for (var i = 0; i < data.length; i++) {
  var row = table.insertRow(-1);
  for (var j = 0; j < columnCount; j++) {
    //Searching for duplicates            
    var num = data[i][0];
    for (var otherRow = i + 1; otherRow < data.length; otherRow++) {
      var dup = data[otherRow][0];
      console.log("What is the dup" + dup);
      if (num === dup) {
        console.log("duplicate");
        elems.data[dup].style.display = "none";

      }
    }


    var cell = row.insertCell(-1);
    cell.innerHTML = data[i][j];
    cell.innerHtml = myZero;

  }
}


var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);

Answer 1

您可以将重复数据删除和实际创建元素与数据分开。使用Array.filter您可以删除所有重复项，这样在插入时就不必担心这一点。

var data = [
  ['e', 0, 1, 2, 3, 4],
  ['a', 54312, 235, 5, 15, 4],
  ['a', 6, 7, 8, 9, 232],
  ['a', 54, 11235, 345, 5, 6],
  ['b', 0, 1, 2, 3, 4],
  ['b', 54312, 235, 5, 15, 4],
  ['c', 62, 15, 754, 93, 323],
  ['d', 27, 11235, 425, 18, 78],
  ['d', 0, 1, 2, 3, 4],
  ['d', 54312, 235, 5, 15, 4],
  ['e', 6, 7, 8, 9, 232],
  ['e', 54, 11235, 345, 5, 6],
  ['e', 0, 1, 2, 3, 4],
  ['e', 54312, 235, 5, 15, 4],
  ['e', 62, 15, 754, 93, 323],
  ['e', 27, 11235, 425, 18, 78]
];


var alreadyFound = [];

data = data.filter(function(item, pos, arr) {
  var key = item[0];
  // If we have already found this character, then skip.
  if (alreadyFound.indexOf(key) > -1) return false;
  // Otherwise, add this char to alreadyFound and include the item.
  alreadyFound.push(key);
  return true;
});


//Create a HTML Table element.
var table = document.createElement("TABLE");
var elems = document.getElementsByClassName("tableRow");


//Get the count of columns.
var columnCount = data[0].length;


//Add the data rows.

for (var i = 0; i < data.length; i++) {
  var row = table.insertRow(-1);
  for (var j = 0; j < columnCount; j++) {
    var cell = row.insertCell(-1);
    cell.innerHTML = data[i][j];
  }
}


var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);

<div id="dvTable"></div>