简单的显示/隐藏在Javascript中出错

Question

I'm trying to create a show/hide function for data within a table populated with data from a mssql database. The function should look for rows with the same value in the "capability" column and onclick, hide all rows with the same value. After this, a row is inserted into the table with the same capability value, but summarizes the data in the hidden rows. This should work in the way that grouping cells together works in excel.

I've managed to get this to work, but it only works for the first click and I receive a "cannot read innerHTML property of NULL" for any of the function's calls after that.

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");
}

The function called at the bottom, createNewRow, handles making the row to be entered after all the rows are hidden. It also, handles the logic for summarizing the hidden rows.

All help is greatly appreciated! Thank you

Edit 1: example table set up

<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

There is no "Capability1" id for any rows after the "CreateNewRow" is called. Therefore, the second time "CompactRows()" is called a null reference is thrown when accessing "document.getElementById(" Capability1 ").innerHTML". Rework the CreateNewRow to inlcude the increment for the Capability id value or test that "getElementById" actually returns an object before attempting to access the innerHTML method.