嵌套表格引发filterTable函数部分列过滤失效问题求助

Items列的嵌套表格会打乱父表格单元格的DOM结构遍历逻辑——你的过滤脚本大概率是直接通过cell.textContent获取单元格文本，这会把嵌套表格里的所有文本也包含进来，导致后续列（Tax、Invoice Total、Logged by）的文本读取出现错位或异常，最终过滤失效。

修改过滤脚本，精准提取父表格单元格的文本内容，排除嵌套表格的干扰。以下是具体实现：

修正后的过滤脚本示例 #

function filterTable() {
  const input = document.getElementById('filterInput');
  const filter = input.value.toUpperCase();
  const table = document.getElementById('invoiceTable');
  const tr = table.getElementsByTagName('tr');

  for (let i = 1; i < tr.length; i++) {
    let match = false;
    const td = tr[i].getElementsByTagName('td');
    
    for (let j = 0; j < td.length; j++) {
      if (td[j]) {
        // 复制当前单元格，移除里面的嵌套表格，再提取文本
        const cellClone = td[j].cloneNode(true);
        const nestedTables = cellClone.getElementsByTagName('table');
        for (let k = 0; k < nestedTables.length; k++) {
          nestedTables[k].remove();
        }
        const txtValue = cellClone.textContent || cellClone.innerText;
        
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          match = true;
          break;
        }
      }
    }
    
    tr[i].style.display = match ? '' : 'none';
  }
}

关键修改点说明 #

• 不再直接读取单元格的textContent，而是先复制单元格节点，移除其中所有嵌套表格后再提取文本，确保只获取当前列的原始内容。
• 遍历逻辑保持不变，但文本提取的准确性得到保障，不会被嵌套表格的内容干扰。

内容的提问来源于stack exchange，提问作者Priyanshu