我如何搜索使用javascript创建的表

Question

我有一个由javascript从数据库获取数据时创建的表，这是函数

 function gotCData(snapshot){
            snapshot.forEach(userSnapshot => {
              var confirmed = userSnapshot.val().confirmed;
              var date = userSnapshot.val().date;
              var deaths = userSnapshot.val().deaths;
              var recovered = userSnapshot.val().recovered;
              //console.log(confirmed, date, deaths, recovered);
              var local = k;
        var csvDate = date;
        var population = recovered;
        var totalCases = confirmed;
        var totalDeaths = deaths;        

        //console.log(location);
        var tr = document.createElement('tr');
        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var td3 = document.createElement('td');
        var td4 = document.createElement('td');
        var td5 = document.createElement('td');

        var tdLocal = document.createTextNode(local);
        var tdPopulation = document.createTextNode(population);
        var tdTotalCases = document.createTextNode(totalCases);
        var tdTotalDeaths = document.createTextNode(totalDeaths);
        var tdDate = document.createTextNode(csvDate);
        td1.appendChild(tdLocal)
        td2.appendChild(tdPopulation)
        td3.appendChild(tdTotalCases)
        td4.appendChild(tdTotalDeaths)
        td5.appendChild(tdDate)
        var tRow1 = document.getElementById("displayCorona").appendChild(td1);
        var tRow2 = document.getElementById("displayCorona").appendChild(td2);
        var tRow3 = document.getElementById("displayCorona").appendChild(td3);
        var tRow4 = document.getElementById("displayCorona").appendChild(td4);
        var tRow5 = document.getElementById("displayCorona").appendChild(td5);
        //Writes the Table Row then the Divs after
        document.getElementById("displayCorona").appendChild(tr, tRow1, tRow2, tRow3, tRow4, tRow5);
            });
        }

我具有搜索功能：

function search(){
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("displayCorona");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td1")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

当我遍历Firebase数据库中的每个节点时，将创建表。搜索功能来自W3Schools，但我不确定为什么它不搜索由上述功能创建的表。

Answer 1

这里有一些代码供您查看。

"use strict";
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onLoad, false);
function onLoad(evt)
{
	var inputStr = "I have a table that is created by javascript when it obtains data from the data base, this is the function";
	document.body.appendChild( makeTable(inputStr) );
	byId('goBtn').addEventListener('click', onGoBtn, false);
}

function makeTable(input)
{
	let tbl = newEl('table');
	
	input = input.replace(',', '');
	let words = input.split(' ');
	let nWords = words.length;
	let nRows = parseInt(nWords/5) + nWords%5;
	
	for (var j=0; j<nRows; j++)
	{
		let tr = newEl('tr');
		for (var col=0; col<5; col++)
		{
			let td = newEl('td');
			td.textContent = words[j*5 + col];
			tr.appendChild(td);
		}
		tbl.appendChild(tr);
	}
	return tbl;
}

function highlightContainingCells(input, highlightClassname)
{
	let cells = document.querySelectorAll('td');
	cells.forEach( cellFunc );
	function cellFunc(curCell)
	{
		if (input == curCell.textContent)
			curCell.classList.add(highlightClassname);
		else
			curCell.classList.remove(highlightClassname);
	}
}

function onGoBtn(evt)
{
	let str = byId('searchStr').value;
	highlightContainingCells(str, "found");
}

td
{
	color: #333;
	background-color: #ddd;
}
td.found
{
	color: #ddd;
	background-color: #333;
}

<input id='searchStr' value='javascript'/><button id='goBtn'>SEARCH</button></br>