how to add a table filter in the code snippets in javascript?

Question

Hi I already put all codes in the links but I do not know how to add filter for name: https://codepen.io/nutkin/pen/yLOmzom The table was created from json object using loop in javascript,I could search a lot of answers about how to fix it in jquery or reactjs,but I really want to know how to fiddle this in javascript. let me take a example:If the user key in 'F' or 'f',the screen should filter all name with 'f' and 'F',thanks every guys.Below is the code:

 var myContacts = [ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"}, {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"}, {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"}, {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"} ]; function generateTable(){ var table=document.createElement('table'); table.style.width='50%'; table.setAttribute('cellspacing','0'); table.setAttribute('cellpading','5'); var col=[]; for(var i=0;i<myContacts.length;i++){ for(var key in myContacts[i]){ if(col.indexOf(key)===-1){ col.push(key); } } } var tHead=document.createElement('thead'); var hRow=document.createElement('tr'); for(var i=col.length-3;i<col.length;i++) { if(col[i]!='stocked') { var th=document.createElement('th'); th.innerHTML=col[i]; hRow.appendChild(th); } } tHead.appendChild(hRow); table.appendChild(tHead); var tBody=document.createElement('tbody'); for(var i=0;i<myContacts.length;i++) { var bRow=document.createElement('tr'); var y=document.createElement('td'); var t=document.createTextNode(myContacts[i].name); y.appendChild(t); var z=document.createElement('tr'); var s=document.createTextNode(myContacts[i].price); z.appendChild(s); bRow.appendChild(y); bRow.appendChild(z); tBody.appendChild(bRow); if(myContacts[i].stocked===false) { y.style.color='red'; } } table.appendChild(tBody); var divContainer=document.getElementById('tableroom'); divContainer.innerHTML=''; divContainer.appendChild(table); }

 <body onload="generateTable()"> <input type="text" name="search" id="searchBar" placeholder="Search.."> <div id='chechbox'> <input type="checkbox" id='searchBox'>Only show products in stock </div> <div id="tableroom" ></div> </body>

Answer 1

something like that ?

 const myContacts = [ { category: 'Sporting Goods', price: "$49.99", stocked: true, name: "Football" } , { category: 'Sporting Goods', price: "$9.99", stocked: true, name: "Baseball" } , { category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball' } , { category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch' } , { category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5' } , { category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7' } ] const info = { room : document.getElementById('tableroom') , table : null }; const chkOnlyStock = document.getElementById('chk-onlyStock') , searchBar = document.getElementById('search-bar') ; (function() // IIFE generateTable { let eTable = document.createElement('table') myContacts.forEach(contact=> { let row = eTable.insertRow() let c_Name = row.insertCell() c_Name.textContent = contact.name c_Name.className = contact.stocked ? '' : 'noStock' row.insertCell().textContent = contact.price }) let rowHead = eTable.createTHead().insertRow() rowHead.insertCell().textContent = 'Name' rowHead.insertCell().textContent = 'Price' info.room.appendChild(eTable) info.table = info.room.querySelector('tbody') })() function rowShow() { let showAll = (searchBar.value === '') if (/^[a-zA-Z]+$/.test(searchBar.value) || showAll ) // accept only characters { let reg = new RegExp(searchBar.value, 'ig') ; info.table.querySelectorAll('tr').forEach(row=> { let stockOk = !(chkOnlyStock.checked && row.cells[0].classList.contains('noStock')) , letterOK = reg.test(row.cells[0].textContent) ; reg.lastIndex = 0; row.className = (( letterOK || showAll) && stockOk) ? '' : 'noDisplay' }) } else searchBar.value = '' // otherwise reset! } chkOnlyStock.onchange = rowShow searchBar.oninput = rowShow

 table { border-collapse: collapse; margin: .5em; } thead { font-weight: bold; background-color: #978aec; text-align: center; } td { padding: .2em .7em; border: 1px solid black; } td:nth-of-type(2) { text-align: right; } .noStock { color: red; } .noDisplay { display: none; }

 <input type="text" name="search" id="search-bar" placeholder="Search.."> <br> <label> <input type="checkbox" id='chk-onlyStock'>Only show products in stock </label> <br> <div id="tableroom"></div>

how to add a table filter in the code snippets in javascript?

Question

1 answers

solution1
0 ACCPTED 2020-10-03 23:02:48

how to add a table filter in the code snippets in javascript?

Question

1 answers

solution1 0 ACCPTED 2020-10-03 23:02:48

solution1
0 ACCPTED 2020-10-03 23:02:48