Busca em Tabela

1. Busca em Tabela

Gazua
(usa Debian)

Enviado em 04/05/2020 - 11:11h

Olá à todos.
Estou estudando sobre mecanismos de buscas em javascript. E depois de algumas depois me arrisquei num código que faz uma busca dentro de uma tabela e sem mais delongas darei um exemplo do que está ocorrendo.
O código é o seguinte:

var tbody = document.getElementById('tbody')

//Nessa parte ficar uma variável "var dados". Uma array com nomes e emails por isso não coloquei.

for(var i = 0; i < dados.length; i++){
var tr = '<tr>' +
'<td>' + dados[i][0] + '</td>' +
'<td>' + dados[i][1] + '</td>' +
'<td>' + dados[i][2] + '</td>' +
'<td>' + dados[i][3] + '</td>' +
'</tr>'
tbody.innerHTML += tr

}

var tr = tbody.childNodes

document.getElementById('txtBusca').addEventListener('keyup', function(){

var busca = document.getElementById('txtBusca').value.toLowerCase()

for(var i = 0; i < tbody.childNodes.length; i++){
var achou = false
var tr = tbody.childNodes[i]
var td = tr.childNodes

for(var j = 0; td.length; j++){
var valor = td[j].childNodes[0].nodeValue.toLowerCase()

if(valor.indexOf(busca) != -1){
achou = true
}
}

if(achou){
tr.style.display = 'table-row'
} else{
tr.style.display = 'none'
}
}
} )

Código é executando após o evento do teclado como descreve acima no evento 'keyup', no entanto recebo o seguinte erro no console: "Uncaught TypeError: Cannot read property 'childNodes' of undefined at HTMLInputElement". Esse erro é detectado no seguinte trecho do código: "childNodes[0].nodeValue.toLowerCase()", que está na variável "var valor". Suspeito que seja algo simples, porém minha falta de experiência não permite encontrar a solução

0 0

Quote

2. Re: Busca em Tabela

msoliver
(usa Debian)

Enviado em 04/05/2020 - 21:27h

Gazua escreveu:

Olá à todos.
Estou estudando sobre mecanismos de buscas em javascript. E depois de algumas depois me arrisquei num código que faz uma busca dentro de uma tabela e sem mais delongas darei um exemplo do que está ocorrendo.
O código é o seguinte:

var tbody = document.getElementById('tbody')

//Nessa parte ficar uma variável "var dados". Uma array com nomes e emails por isso não coloquei.

for(var i = 0; i < dados.length; i++){
var tr = '<tr>' +
'<td>' + dados[i][0] + '</td>' +
'<td>' + dados[i][1] + '</td>' +
'<td>' + dados[i][2] + '</td>' +
'<td>' + dados[i][3] + '</td>' +
'</tr>'
tbody.innerHTML += tr

}

var tr = tbody.childNodes

document.getElementById('txtBusca').addEventListener('keyup', function(){

var busca = document.getElementById('txtBusca').value.toLowerCase()

for(var i = 0; i < tbody.childNodes.length; i++){
var achou = false
var tr = tbody.childNodes[i]
var td = tr.childNodes

for(var j = 0; td.length; j++){
var valor = td[j].childNodes[0].nodeValue.toLowerCase()

if(valor.indexOf(busca) != -1){
achou = true
}
}

if(achou){
tr.style.display = 'table-row'
} else{
tr.style.display = 'none'
}
}
} )

Código é executando após o evento do teclado como descreve acima no evento 'keyup', no entanto recebo o seguinte erro no console: "Uncaught TypeError: Cannot read property 'childNodes' of undefined at HTMLInputElement". Esse erro é detectado no seguinte trecho do código: "childNodes[0].nodeValue.toLowerCase()", que está na variável "var valor". Suspeito que seja algo simples, porém minha falta de experiência não permite encontrar a solução

Boa noite Gazua.
Segue um exemplo de como "pegar" o valos das "Células".

<!DOCTYPE html>

<html>

<head>

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

<style>

table, td {

border: 1px solid black;

color: #616161;

text-align: center;

font-size: 125%;

}

h1, div{ text-align: center;}

</style>

</head>

<body onload="geratable();">



<p>Click para listar o valor das células.</p>

<button onclick="myFunction_00()">Pega Valores</button>

<button onclick="myFunction_01()">Altera Cor</button>

<br>

<h1>Tabela 7 x 9</h1>

<div id="ex3"></div>

<p id="tst"></p>



<script>

var R=0, D=document, tabela;



setTimeout(function(){

//ALTERA O VALOR DA CÉLULA ESPECIFICADA

var alvo=tabela.rows[4].cells[3];

alvo.innerHTML = "|X|";

alvo.style.color="yellow";

alvo.style.textShadow = "1px 1px #000";

},1000);



function myFunction_00() {

var x="", r=0, c=0, br="", value="", valor="";

var C=D.getElementById("myTable_00").rows[r].cells.length;

	for (r=0;r<R-1;r++){

	value="";

		for (c=0;c<C;c++){

		valor=D.getElementById("myTable_00").rows[r].cells[c].innerHTML;

		value+=valor+"|";

			if (c==6){x="\""+valor+"\"<br>";

			}else{x="\""+valor+"\"";

			}

		D.getElementById("tst").innerHTML += " RC: " +r+c+" : <font color='#F00'><b>"+x+"</b></font>";

		}

	console.log("Linha: "+value);

	}

}



function myFunction_01() {

console.log("R: "+R);

var count=0;

	for (var linha=0;linha<(R-1);linha++) {

		for (var coluna=0;coluna<7;coluna++) {

		var VALOR = tabela.rows[linha].cells[coluna].innerHTML;

		tabela.rows[linha].cells[coluna].style.textShadow = "1px 1px #000";

			if (linha%2==0){ tabela.rows[linha].cells[coluna].style.color="yellow";

			}

		}

	}

}



function geratable(){

var html="<table id=\"myTable_00\" align=\"center\" cellspacing=5 cellpadding=1 border=1 align=center> " 

html+="<tr>";

	for (var lin=0;lin<9;lin++) {

		for (var col=0;col<7;col++) {

		html+="<td>"+lin+":"+col;

		html+="</td>"

		if (col>0 && col%6==0) html+="</tr><tr>"

		}

	}

html+="</tr></table>"

D.getElementById("ex3").innerHTML=html

R=D.getElementById('myTable_00').rows.length;

tabela=D.getElementById("myTable_00");



}

</script>

</body>

</html>

______________________________________________________________________
Importante: echo -e "\n$(lynx --dump goo.gl/a9KeFc|sed -nr '/^[ ]+Se/,/dou.$/p')\n"
Att.: Marcelo Oliver
______________________________________________________________________

0 0

Quote