如何搜索使用 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>

Answer 2

有很多错误的事情。

• 您没有指定snapshot 是什么数据类型。是数组还是别的？我假设它是 JSON 对象数组，其中每个对象表示表中的一行。
• 我不明白.val()方法的使用。我完全删除了它。
• 正在生成的表格式不正确。您将 tr 附加到表中。但不是将td 附加到tr，而是将它们附加到表中。我也更正了这一点。
• 有一个未定义的变量k 用于设置本地。
• tr 上的 display:block 样式在删除行后会以一种奇怪的方式显示表格。我把它改成了display:table-row，它非常适合表格行

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;
        var local = userSnapshot.local;    // we will look at this later
        // 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)

        tr.appendChild(td1)
        tr.appendChild(td2)
        tr.appendChild(td3)
        tr.appendChild(td4)
        tr.appendChild(td5)

        // Writes the Table Row then the Divs after
        document.getElementById("displayCorona").appendChild(tr);
    });
}

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.querySelectorAll("tr:not(.table-head)");

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

// This is used for testing only
// window.onload = () => {
//     snapshot = firebaseToArray(firebaseJSON)
//     gotCData(snapshot)
// }

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
}
		
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
		
tr:nth-child(even) {
    background-color: #dddddd;
}

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<input type="text" id="myInput">
	<button type="submit" onclick="search()">Search</button>
	<table id="displayCorona">
		<tr class="table-head">
			<th>Location</th>
			<th>Population</th>
			<th>Total cases</th>
			<th>Total deaths</th>
			<th>Date</th>
		</tr>
	</table>
</body>

</html>

一些友好的建议：

• 我看到您已经从快照中提取数据并将它们分配给变量两次，例如您首先从快照中提取date，然后将其分配给csvDate，而您可以直接将日期提取到csvDate
• 您正在为 td 创建文本节点，为它们分配值并将它们附加到相应的 td 节点。您可以使用innerHTML 或innerText 直接插入数据，例如td1.innerText = local。无需创建文本节点并附加它们！
• 您似乎直接从 w3schools 复制粘贴了 search 函数的代码。请在使用后查看此类代码。
• 使用developer console 查找常见错误。 Debugging你的代码可以解决很多常见问题，熟悉一下吧。