Created
June 4, 2022 13:13
-
-
Save Octagon-simon/34eace872b43beb23b71d12769a18b61 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //our table's data | |
| const tableData = { | |
| 1 : ["Simon ugorji", "[email protected]", "01234", "Germany"], | |
| 2 : ["Tony ugorji", "[email protected]", "013234", "Turkey"], | |
| 3 : ["Victor ugorji", "[email protected]", "014234", "Germany"], | |
| 4 : ["Felix ugorji", "[email protected]", "011234", "Canada"], | |
| 5 : ["Jordan ugorji", "[email protected]", "016234", "Costa Rica"], | |
| 6 : ["Henry ugorji", "[email protected]", "0166234", "Belgium"], | |
| 7 : ["Frank Sams", "[email protected]", "01234", "Nigeria"], | |
| 8 : ["John Doe", "[email protected]", "0123466", "Australia"], | |
| 9 : ["Peter Lamb", "[email protected]", "0123774", "Algeria"], | |
| 10 : ["Rodney Human", "[email protected]", "0128934", "Ukraine"] | |
| } | |
| //store table data element | |
| const tableDataElem = document.querySelector('#append_data'); | |
| //function to build table | |
| function buildTable(matchingIDs){ | |
| //reset table data | |
| tableDataElem.innerHTML = ""; | |
| //check if parameter is provided | |
| if(typeof matchingIDs === "undefined"){ | |
| //our loop index | |
| let ind = 0; | |
| //our table index | |
| let tableInd = 1; | |
| //loop through table object | |
| while(ind < Object.keys(tableData).length){ | |
| //append data using a template literal | |
| tableDataElem.innerHTML += ` | |
| <tr> | |
| <td>${tableInd}</td> | |
| <td>${tableData[tableInd][0]}</td> | |
| <td>${tableData[tableInd][1]}</td> | |
| <td>${tableData[tableInd][2]}</td> | |
| <td>${tableData[tableInd][3]}</td> | |
| </tr> | |
| `; | |
| //increment loop index | |
| ind++; | |
| //increment table index | |
| tableInd++; | |
| } | |
| }else if(matchingIDs.length !== 0){ //check if matchingIDs array is not empty | |
| //our loop index | |
| let ind = 0; | |
| //our table index | |
| let tableInd = 1; | |
| //loop through matching IDs provided | |
| while(ind < matchingIDs.length){ | |
| //append data by getting ID of the record and using a template literal | |
| tableDataElem.innerHTML+=` | |
| <tr> | |
| <td>${tableInd}</td> | |
| <td>${tableData[matchingIDs[ind]][0]}</td> | |
| <td>${tableData[matchingIDs[ind]][1]}</td> | |
| <td>${tableData[matchingIDs[ind]][2]}</td> | |
| <td>${tableData[matchingIDs[ind]][3]}</td> | |
| </tr> | |
| `; | |
| //increment loop index | |
| ind++; | |
| //increment table index | |
| tableInd++; | |
| } | |
| }else{ | |
| tableDataElem.innerHTML+=` | |
| <tr> | |
| <td colspan="5"> | |
| NO DATA FOUND | |
| </td> | |
| </tr> | |
| `; | |
| } | |
| }; | |
| buildTable(); | |
| //attach event listener | |
| document.querySelector('#inp_search').addEventListener('input', function(){ | |
| //store the search query | |
| let value = this.value.trim(); | |
| //check if value is not empty | |
| if(value){ | |
| //store matching record IDs | |
| let matchingIDs = []; | |
| //loop index | |
| let ind = 1; | |
| //loop through the data to find matching text | |
| while(ind < Object.keys(tableData).length){ | |
| //check if current property contains the search query | |
| if(tableData[ind][0].includes(value) || | |
| tableData[ind][1].includes(value) || | |
| tableData[ind][2].includes(value) || | |
| tableData[ind][3].includes(value)){ | |
| //store the id of the record | |
| matchingIDs.push(ind); | |
| } | |
| //increment index | |
| ind++; | |
| } | |
| //invoke the function by passing in the matching IDs | |
| buildTable(matchingIDs); | |
| }else{ | |
| //invoke the build table function without providing an argument | |
| buildTable(); | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment