Question

我有以下用javascript编写的自定义表类：

function FilterMenu(tableId){
id = tableId;
this.table = document.getElementById(id);
this.initialRowCount = 5;
this.rowCount = this.initialRowCount;
this.rowHeight = "18.5px";
...

this.addRow = function(rowIndex){
  var row = this.table.insertRow(rowIndex);
  row.id = "filterRow" + rowIndex;
  document.getElementById('filterRow' + rowIndex).style.height = this.rowHeight;
  var cell = row.insertCell(0);
  cell.style.fontFamily = "Roboto Light";
  cell.style.fontSize = "12px";
  cell.style.color = "#333333";
  var nameOfCell = document.createElement("p"); //This tag disappears after function is called.
  nameOfCell.id = "cellText"+rowIndex;
  cell.appendChild(nameOfCell);
  cell.addEventListener("click", clickCell, false);
}

this.updateCells = function(cellsToDisplay){
  var maxRows = this.rowCount;
  if(cellsToDisplay.length > this.rowCount){
    maxRows = cellsToDisplay.length;
  }
  var rowIndexesToRemove = [];
  for(cellIndex = 0; cellIndex < maxRows; cellIndex++){
    if(cellIndex < cellsToDisplay.length){
      if(cellIndex >= this.initialRowCount && cellIndex == this.rowCount){
        this.addRow(cellIndex);
        this.rowCount++;
      }
      var cell = document.getElementById(id).rows[cellIndex].cells[0];
      //This fails as it can't find any p tags on the HTML element.
      cell.getElementsByTagName("p")[0].innerHTML = cellsToDisplay[cellIndex].name;
      this.addCellFeatures(cellIndex);
    } else {
      var cell = document.getElementById(id).rows[cellIndex].cells[0];
      cell.innerHTML = "";
      if(cellIndex >= this.initialRowCount){
        rowIndexesToRemove.push(cellIndex);
      }
    }
  }
  for(var i = 0; i < rowIndexesToRemove.length; i++){
    this.removeRow(rowIndexesToRemove[0]);
    this.rowCount--;
  }
}

...
}

它已接近完成，但我有一个消失的p标签问题。我在addRow（）方法中的HTML表中创建行。这包括创建一个p标签来保存一些文本。

这是HTML表：

<div class="filterMenu" id="filterMenu">
      <div class="filterSearchContainer">
          <div class="filterMag">
              <img src="search@2x.png" id="filterInput">
          </div>
          <form onSubmit="return false;">
              <input class="filterSearch" id="filterSearch" type="text" placeholder="Filter" name="search" />
          </form>
          <div class="filterTableContainer">
            <table id="filterTable"></table>
          </div>
          <div class="bottomBar">
              <img src="whiteplus@2x.png" class="filterPlus" id="filterPlus">
          </div>
      </div>
    </div>

但是当在同一个FilterMenu对象上调用updateCells（）函数时，p标记已经消失。奇怪的是，我在addRows（）中添加的其余HTML仍然存在，只缺少p标记。

这是addRows（）末尾和updateCells（）开头的其中一行的HTML输出：

<td style=\"font-family: &quot;Roboto Light&quot;; font-size: 12px; color: rgb(51, 51, 51);\"><p id=\"cellText0\"></p></td>

<td style=\"font-family: &quot;Roboto Light&quot;; font-size: 12px; color: rgb(51, 51, 51);\"></td>

如您所见，只是p标签消失了。

在使用新的FilterMenu（）创建FilterMenu对象后，我在另一个js文件中的全局定义函数（setUpFilterMenu（））中调用addRows（）方法。

updateCells（）仅在全局范围内的setUpFilterMenu（）内调用的函数中调用。如果您认为有必要，我也可以提供此代码。

当p标签不会消失时，这就是菜单的样子。

任何想法可能导致我的p标签消失但其余的td HTML仍然存在？

编辑：

这是一个带有错误的代码集https://codepen.io/rd95/pen/YYjjYR?editors=1001

附加的p标记不断从HTML中消失

0 个答案: