Question

我正在尝试为填充了来自mssql数据库的数据的表中的数据创建一个show / hide函数。该函数应在“功能”列和onclick中查找具有相同值的行，隐藏具有相同值的所有行。在此之后，将一行插入具有相同功能值的表中，但总结隐藏行中的数据。这应该以将单元格组合在一起的方式工作。

我设法让这个工作，但它只适用于第一次点击，并且我接收到“无法读取NULL的innerHTML属性”之后的任何函数调用。 < / p>

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。因此，当访问“document.getElementById（” Capability1 “）。innerHTML”时，第二次调用“CompactRows（）”被称为空引用。重写CreateNewRow以包含Capability id值的增量或测试“getElementById”在尝试访问innerHTML方法之前实际返回一个对象。

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

1 个答案: