Help filter in javascript

[vheriel04]

Mga master humihingi ulit po ako ng tulong. ayaw naman po kasi gumana ng filter. gusto ko po mangyari ay magshoshow ang data na nilagay ko sa search box.

eto po yung link ng code
https://jsfiddle.net/pinun0/4s1eyjt0/23/

javascript html at css palang alam ko.

sbmt.onclick = function() {



let colID = document.querySelectorAll('tr').length
let txtname = document.getElementById('name')
insertName = txtname.value

let middle = document.getElementById('middle')
middletxt = middle.value

let textLast = document.getElementById('last')
insertLast = textLast.value

let txttAge = document.getElementById('age')
insertAge = txttAge.value
let ageInt = parseInt(insertAge);

if ((insertName && insertLast && insertAge) === "") {
alert("invalid input")
return;
} else if (insertName.length <= 1) {
alert("Name is not valid")
return;
} else if (insertLast.length <= 1) {
alert("lastname is not valid")
return;
} else if (ageInt <= 17) {
alert("age must be 18 above")
return;
}


let insertData = document.getElementById('MyTable');
let insertD = insertData.insertRow(1);
let UID = insertD.insertCell(0);
let Name = insertD.insertCell(1);
let Mid = insertD.insertCell(2);
let Last = insertD.insertCell(3);
let Age = insertD.insertCell(4);


//show text in row, text converted to proper case! 'copy paste code' )
UID.innerHTML = colID;
Name.innerHTML = insertName.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
Mid.innerHTML = middletxt.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
Last.innerHTML = insertLast.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
Age.innerHTML = insertAge;

}

//DITO PO MAY PROBLEMA !filter ayaw gumana!
searchBtn.onclick = function(){

let searchTxt = document.getElementById('search');
let search = searchTxt.value
let rowlist = document.querySelectorAll('tr')

let searchname = rowlist.filter(x=>x.innerHTML ===search);
console.log(searchname);
}

 

[jmattthew111]

Re: Help simple for loop javascript

add ka ng variable outside ng click event

var id = 0;
sbmt.onclick = function(){

let txtname = document.getElementById('name')
insertName = txtname.value

let textLast = document.getElementById('last')
insertLast = textLast.value

let txttAge = document.getElementById('age')
insertAge = txttAge.value




let insertData = document.getElementById('MyTable');
let insertD = insertData.insertRow(1);
let UID = insertD.insertCell(0);
let Name = insertD.insertCell(1);
let Last = insertD.insertCell(2);
let Age = insertD.insertCell(3);

let tdempty = document.querySelectorAll('td')[0];

if (tdempty.innerHTML === "")
{
//idk pero somewhere dito is wrong but it works.
for(var i = 0; i<=0;i++)
{
tdempty.innerHTML=id;
id++;
}

}
Name.innerHTML = insertName;
Last.innerHTML = insertLast;
Age.innerHTML = insertAge;
}

 

[vheriel04]

Re: Help simple for loop javascript

Yun lang pala yun , salamat pag aralan ko yung code.

 

[jskhulitz]

Re: Help simple for loop javascript

sbmt.onclick = function(){
	// add this to count the number of TR present in the table, ito yung maglalagay ng continuity sa numbering mo
	[COLOR="#FF0000"]var temp = document.getElementById('MyTable').querySelectorAll('tr').length;[/COLOR]

	let txtname = document.getElementById('name'); insertName = txtname.value;
	let textLast = document.getElementById('last'); insertLast = textLast.value;
	let txttAge = document.getElementById('age'); insertAge = txttAge.value;
	
	let insertData = document.getElementById('MyTable');
	
	let insertD = insertData.insertRow([COLOR="#FF0000"]-1[/COLOR]);
	// changed the parameter from 1 to -1. Kapag naka 1, yung i-insert nya na row ay sa taas isisingit.
	// hindi lang evident dahil hindi pa nga nagi-increment yung example mo.
	// by changing it to -1, sa dulo nya idudugtong.
	
	let UID = insertD.insertCell(0);
	let Name = insertD.insertCell(1);
	let Last = insertD.insertCell(2);
	let Age = insertD.insertCell(3);

	let tdempty = document.querySelectorAll('td')[0];

	// if (tdempty.innerHTML === ""){ for(var i = 1; i<=10;i++) { tdempty.innerHTML=i; } }
	
	[COLOR="#FF0000"]UID.innerHTML = temp;[/COLOR] // dito babagsak yung count ng number of TR
	Name.innerHTML = insertName;
	Last.innerHTML = insertLast;
	Age.innerHTML = insertAge;
}

 

[siravi]

Re: Help simple for loop javascript

add ka ng variable outside ng click event

var id = 0;
sbmt.onclick = function(){

let txtname = document.getElementById('name')
insertName = txtname.value

let textLast = document.getElementById('last')
insertLast = textLast.value

let txttAge = document.getElementById('age')
insertAge = txttAge.value




let insertData = document.getElementById('MyTable');
let insertD = insertData.insertRow(1);
let UID = insertD.insertCell(0);
let Name = insertD.insertCell(1);
let Last = insertD.insertCell(2);
let Age = insertD.insertCell(3);

let tdempty = document.querySelectorAll('td')[0];

if (tdempty.innerHTML === "")
{
//idk pero somewhere dito is wrong but it works.
for(var i = 0; i<=0;i++)
{
tdempty.innerHTML=id;
id++;
}

}
Name.innerHTML = insertName;
Last.innerHTML = insertLast;
Age.innerHTML = insertAge;
}

sbmt.onclick = function(){

let txtname = document.getElementById('name')
insertName = txtname.value

let textLast = document.getElementById('last')
insertLast = textLast.value

let txttAge = document.getElementById('age')
insertAge = txttAge.value





let insertData = document.getElementById('MyTable');
let insertD = insertData.insertRow(1);
let UID = insertD.insertCell(0);
let Name = insertD.insertCell(1);
let Last = insertD.insertCell(2);
let Age = insertD.insertCell(3);

var incre = Number($('tr:eq(2) td:first').text())+1

UID.innerHTML = incre;
Name.innerHTML = insertName;
Last.innerHTML = insertLast;
Age.innerHTML = insertAge;

}




try mu to hehehe working yan

 

[vheriel04]

Re: Help simple for loop javascript

sbmt.onclick = function(){
	// add this to count the number of TR present in the table, ito yung maglalagay ng continuity sa numbering mo
	[COLOR="#FF0000"]var temp = document.getElementById('MyTable').querySelectorAll('tr').length;[/COLOR]

	let txtname = document.getElementById('name'); insertName = txtname.value;
	let textLast = document.getElementById('last'); insertLast = textLast.value;
	let txttAge = document.getElementById('age'); insertAge = txttAge.value;
	
	let insertData = document.getElementById('MyTable');
	
	let insertD = insertData.insertRow([COLOR="#FF0000"]-1[/COLOR]);
	// changed the parameter from 1 to -1. Kapag naka 1, yung i-insert nya na row ay sa taas isisingit.
	// hindi lang evident dahil hindi pa nga nagi-increment yung example mo.
	// by changing it to -1, sa dulo nya idudugtong.
	
	let UID = insertD.insertCell(0);
	let Name = insertD.insertCell(1);
	let Last = insertD.insertCell(2);
	let Age = insertD.insertCell(3);

	let tdempty = document.querySelectorAll('td')[0];

	// if (tdempty.innerHTML === ""){ for(var i = 1; i<=10;i++) { tdempty.innerHTML=i; } }
	
	[COLOR="#FF0000"]UID.innerHTML = temp;[/COLOR] // dito babagsak yung count ng number of TR
	Name.innerHTML = insertName;
	Last.innerHTML = insertLast;
	Age.innerHTML = insertAge;
}

boss salamat sa explination ng mga dinagdag mong codes. mas naiintindihan ko sya. kahit di ko pala lagyan ng loop possible sya. na intindihan ko na kung para saan ang -1 sa insertRow.

sbmt.onclick = function(){

let txtname = document.getElementById('name')
insertName = txtname.value

let textLast = document.getElementById('last')
insertLast = textLast.value

let txttAge = document.getElementById('age')
insertAge = txttAge.value





let insertData = document.getElementById('MyTable');
let insertD = insertData.insertRow(1);
let UID = insertD.insertCell(0);
let Name = insertD.insertCell(1);
let Last = insertD.insertCell(2);
let Age = insertD.insertCell(3);

var incre = Number($('tr:eq(2) td:first').text())+1

UID.innerHTML = incre;
Name.innerHTML = insertName;
Last.innerHTML = insertLast;
Age.innerHTML = insertAge;

}

try mu to hehehe working yan

boss thank you din sa sagot, pero parang di sya gumana??

 

[vheriel04]

Re: Help simple for loop javascript

Mga sir, up ko lang tong panibagong problem, this time sa filter naman po Thank you