簡單的顯示/隱藏在Javascript中出錯

Question

我正在嘗試為填充來自mssql數據庫的數據的表中的數據創建顯示/隱藏功能。 該函數應在“功能”列中查找具有相同值的行，然后單擊以隱藏具有相同值的所有行。 之后，將具有相同功能值的一行插入到表中，但匯總了隱藏行中的數據。 這應該以將單元格分組在excel中工作的方式工作。

我設法使它起作用，但是它僅適用於第一次單擊，此后任何函數調用都收到“無法讀取NULL的innerHTML屬性”。

function compactRows(thisrow) {
  var totalRows = document.getElementById("DataTable").getElementsByTagName("tr").length;

  var summaryVal1= [];
  var summaryVal2= [];

  for(var i = 1; i < totalRows;i++) {
    var trID = "capability" + i;
    if(thisrow.innerHTML == document.getElementById(trID).innerHTML) { //The error gets returned on this line
        summaryVal1.push(document.getElementById(trID).parentNode.children[5].innerHTML);
        summaryVal2.push(document.getElementById(trID).parentNode.children[14].innerHTML);
        document.getElementById(trID).parentNode.style.display = 'none';
    }
  }
  createNewRow(thisrow, summaryVal1, summaryVal2);
}

//I took out the logic for the data summarizing in the createNewRow function because I don't think its relevant to the issue I'm having. Also, I didn't want to crowd the area with unrelated code
function createNewRow(row, ibxMobile, overallStatus) {
var table = document.getElementById("DataTable");
var localRow = table.insertRow(row.parentNode.rowIndex);

var cell1 = localRow.insertCell(0);
cell1.setAttribute("id", "entry1");

var cell2 = localRow.insertCell(0);
cell2.setAttribute("id", "Capability");
cell2.innerHTML = row.innerHTML;

var cell3 = localRow.insertCell(0);
cell3.setAttribute("id", "entry3");
}

在底部調用的函數createNewRow處理隱藏所有行之后輸入的行。 它還處理匯總隱藏行的邏輯。

非常感謝所有幫助！ 謝謝

編輯1：示例表設置

<table>
<tr>
<th>Entry1 </th>
<th>Capability</th>
<th>Entry3 </th>
</tr>
<tr>
<td>1.1</td>
<td id="Capability1" onclick="compactRows(this)">Lasers</td>
<td>stuff</td>
</tr>
<tr>
<td>1.2</td>
<td id="Capability2" onclick="compactRows(this)">Lasers</td>
<td>things</td>
</tr>
<tr>
<td>2.1</td>
<td id="Capability3" onclick="compactRows(this)">Beams</td>
<td>more things</td>
</tr>
</table>

//The Below table is what it looks like after clicking either of the first two entries

<table>
<tr>
<th>Entry1 </th>
<th>Capability</th>
<th>Entry3 </th>
</tr>
<tr>
<td>1</td>
<td id="Capability">Lasers</td>
<td></td>
</tr>
<tr>
<td>2.1</td>
<td id="Capability3" onclick="compactRows(this)">Beams</td>
<td>more things</td>
</tr>
</table>

Answer 1

調用“ CreateNewRow”之后，任何行都沒有“ Capability1” ID。 因此，第二次調用“ CompactRows（）”時，訪問“ document.getElementById（” Capability1 “）.innerHTML”時將引發空引用。 重做CreateNewRow以包括Capability id值的增量，或者在嘗試訪問innerHTML方法之前測試“ getElementById”是否實際上返回了對象。