I have a table with 5 columns. the following code will filter the data on basis of all columns. I want to filter the data for each column. for ex: if there are 10 columns then 10 search fields and Also how can I make HTML part Dynamic so that I don't have to add one more search text field whenever a new column is added.
<input id="myInput" type="text" />
<script>
function filterTable(event) {
var filter = event.target.value.toUpperCase();
var rows = document.querySelector("#myTable tbody").rows;
for (var i = 1; i < rows.length; i++) {
var Col1 = rows[i].cells[0].textContent.toUpperCase();
var Col2 = rows[i].cells[1].textContent.toUpperCase();
var Col3 = rows[i].cells[2].textContent.toUpperCase();
var Col4 = rows[i].cells[3].textContent.toUpperCase();
var Col5 = rows[i].cells[4].textContent.toUpperCase();
if (Col1.indexOf(filter) > -1 || Col2.indexOf(filter) > -1 || Col3.indexOf(filter) > -1
|| Col4.indexOf(filter) > -1 || Col5.indexOf(filter) > -1) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
document.querySelector(''#myInput'').addEventListener(''keyup'', filterTable, false);
</script>
I want to have this kind of functionality:
You can loop over the rows and then the columns. The Array.from method allows you to cast an element list to an array so that you can iterate over the children with Array.prototype.forEach.
All you need to do is have a show initialized to true for each row. Then if any DOES NOT column meets the filter criteria, you set show to false. After looping through all columns you display the row based on the final value of show.
Edit: Make sure you are using a browser that supports ES6+. There is a polyfill available for Array.from on the MDN site.
function filterTable(event) {
let filter = event.target.value.trim().toLowerCase();
let rows = document.querySelector('#myTable tbody').rows;
for (let i = 0; i < rows.length; i++) {
let row = rows[i], show = false;
if (filter.length > 0) {
for (let j = 0; j < row.children.length; j++) {
let col = row.children[j], text = col.textContent.toLowerCase();
if (text.indexOf(filter) > -1) {
show = true;
continue;
}
}
} else {
show = true;
}
// Avoid using 'row.styledisplay' - https://stackoverflow.com/a/28028656/1762224
// Avoid using 'row.visibility' - rows do not collapse
toggleClass(row, 'hidden-row', !show);
}
}
function toggleClass(el, className, state) {
if (el.classList) el.classList.toggle(className, state);
else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (state === undefined) {
if (existingIndex > -1) classes.splice(existingIndex, 1)
else classes.push(existingIndex);
} else {
if (!state) classes.splice(existingIndex, 1)
else classes.push(existingIndex);
}
el.className = classes.join(' ');
}
}
document.querySelector('#myInput').addEventListener('keyup', filterTable, false);
body {
padding: 8px;
}
.field label {
font-weight: bold;
margin-right: 0.25em;
}
#myTable {
margin-top: 0.667em;
width: 100%;
}
#myTable th {
text-transform: capitalize;
}
.hidden-row {
display: none;
}
<link href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" rel="stylesheet" />
<div class="field"><label for="myInput">Filter:</label><input id="myInput" type="text" /></div>
<table id="myTable" class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>name</th>
<th>drink</th>
<th>pizza</th>
<th>movie</th>
</tr>
</thead>
<tbody>
<tr>
<td>Homer</td>
<td>Squishie</td>
<td>Magheritta</td>
<td>The Avengers</td>
</tr>
<tr>
<td>Marge</td>
<td>Squishie</td>
<td>Magheritta</td>
<td>The Avengers</td>
</tr>
<tr>
<td>Bart</td>
<td>Squishie</td>
<td>Pepperoni</td>
<td>Black Dynamite</td>
</tr>
<tr>
<td>Lisa</td>
<td>Buzz Cola</td>
<td>Pepperoni</td>
<td>Iron Man</td>
</tr>
<tr>
<td>Maggie</td>
<td>Duff Beer</td>
<td>Magheritta</td>
<td>The Avengers</td>
</tr>
<tr>
<td>Kent</td>
<td>Duff Beer</td>
<td>Hawaiian</td>
<td>The Avengers</td>
</tr>
</tbody>
</table>
Search fields example
populateTable(document.getElementById('simpsons'), getData());
function dataFields(data) {
return data.reduce((r, x) => Object.keys(x).reduce((s, k) => s.indexOf(k) === -1 ? s.concat(k) : s, r), []);
}
/* Can be useful if working with raw JSON data */
function searchCriteria(fields) {
return Array.from(fields).reduce((o, field) => {
return Object.assign(o, { [field.getAttribute('placeholder')] : field.value });
}, {});
}
function onFilter(e) {
let table = e.target.parentElement.parentElement.parentElement.parentElement;
let fields = table.querySelectorAll('thead tr th input');
let criteria = searchCriteria(fields); // Unused, but useful if filtering bindable data
let searchText = Array.from(fields).map(field => field.value.trim());
Array.from(table.querySelectorAll('tbody tr')).forEach(row => {
let hideRow = false;
Array.from(row.children).forEach((col, index) => {
var value = col.innerHTML.trim().toLowerCase();
var search = searchText[index].toLowerCase();
if (search.length > 0) {
if (!value.startsWith(search)) { /* or value.indexOf(search) === -1 */
hideRow = true;
return;
}
}
});
row.classList.toggle('hidden-row', hideRow);
});
}
function populateTable(table, data) {
let fields = dataFields(data);
let thead = document.createElement('THEAD');
let tr = document.createElement('TR');
fields.forEach(field => {
let th = document.createElement('TH');
th.innerHTML = field;
tr.appendChild(th);
});
thead.appendChild(tr);
let tbody = document.createElement('TBODY');
tr = document.createElement('TR');
fields.forEach(field => {
let th = document.createElement('TH');
let input = document.createElement('INPUT');
input.setAttribute('placeholder', field);
input.addEventListener('keyup', onFilter);
th.append(input);
tr.appendChild(th);
});
thead.appendChild(tr);
data.forEach(record => {
let tr = document.createElement('TR');
fields.forEach(field => {
let td = document.createElement('TD');
td.innerHTML = record[field];
tr.appendChild(td);
});
tbody.append(tr);
});
table.appendChild(thead);
table.appendChild(tbody);
}
function getData() {
return [{
"name": "Homer",
"drink": "Squishie",
"pizza": "Magheritta",
"movie": "The Avengers"
}, {
"name": "Marge",
"drink": "Squishie",
"pizza": "Magheritta",
"movie": "The Avengers"
}, {
"name": "Bart",
"drink": "Squishie",
"pizza": "Pepperoni",
"movie": "Black Dynamite"
}, {
"name": "Lisa",
"drink": "Buzz Cola",
"pizza": "Pepperoni",
"movie": "Iron Man"
}, {
"name": "Maggie",
"drink": "Duff Beer",
"pizza": "Magheritta",
"movie": "The Avengers"
}, {
"name": "Kent",
"drink": "Duff Beer",
"pizza": "Hawaiian",
"movie": "The Avengers"
}];
}
table {
border-collapse: collapse;
width: 100%;
}
table thead tr th {
text-transform: capitalize;
}
table thead tr:last-child {
background: #eaeaea;
border-bottom: 4px double #cbcbcb;
}
table thead tr th input {
width: 100%;
}
table tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
table tbody tr.hidden-row {
display: none;
}
<link href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" rel="stylesheet" />
<table id="simpsons" class="pure-table pure-table-horizontal"></table>
Browser Compatibility
function onFilter(e) {
var table = e.target.parentElement.parentElement.parentElement.parentElement;
console.log(table);
var fields = table.querySelectorAll('thead tr th input');
console.log(fields);
var searchText = Array.from(fields).map(function (field) {
return field.value.trim();
});
console.log(searchText);
Array.from(table.querySelectorAll('tbody tr')).forEach(function (row) {
var hideRow = false;
Array.from(row.children).forEach(function (col, index) {
var value = col.innerHTML.trim().toLowerCase();
console.log(value);
var search = searchText[index].toLowerCase();
console.log(search);
if (search.length > 0) {
if (value.indexOf(search) === -1) {
hideRow = true;
return;
}
}
});
row.classList.toggle('hidden-row', hideRow);
});
}
All you have to do is iterate the .cells array with a for loop:
For this example, I used a variable to determine if the row should be shown.
function filterTable(event) {
var filter = event.target.value.toUpperCase();
var rows = document.querySelector("#myTable tbody").rows;
for (var i = 1; i < rows.length; i++) {
// Placeholder to indicate if a row matches the given query.
var shouldShowRow = false;
// Loop over all the cells in this row.
for (var k = 0; k < rows[i].cells.length) {
// Check to see if this cell in this row matches the query.
if (rows[i].cells[k].textContent.toUpperCase().indexOf(filter) > -1) {
// Yes, this cell matches, therefore this entire row matches.
// Flip the show row boolean to indicate that we need to show.
shouldShowRow = true;
// Because this cell matches, we do not need to check any more cells.
break;
}
}
// Change the display on the row if we need to.
if (shouldShowRow) {
rows[i].style.display = "";
} else rows[i].style.display = "none";
}
}
You can use array.
First map col to an array colArr and than using some you can match you can match filter content with content of cols .
for (var i = 1; i < rows.length; i++) {
let colArr = new Array(5).fill(0).map((e,index)=> rows[i].cells[index].textContent.toUpperCase();)
if (colArr.some(e=> e.indexOf(filter) > -1 ) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
})
}
Related
Each time I input another football score, the league table is updated and displayed but it's appended to a list of tables. How do I display only the latest table?
Here is an extract of the html:
<div>
<table id="matches" border="1"> </table>
</div>
<div>
<table id="standings" border="1"> </table>
</div>
<input type="button" value="Update" onclick="update()" />
Here is the javascript that displays the fixtures for inputting scores:
// Display fixtures to input the scores
window.onload = function()
{
table = document.getElementById("matches");
var row;
var cell1;
var cell2;
var cell3;
for (i = 1; i < Results.length; i++)
{
row = table.insertRow(i-1); //table starts row 0 but Results row 1 so i-1 used
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);
cell4 = row.insertCell(3);
cell1.innerHTML = Results[i][0];
cell2.innerHTML = '<input type="number" min="0" max="99"/>'
cell3.innerHTML = '<input type="number" min="0" max="99"/>'
cell4.innerHTML = Results[i][3];
}
}
And here is the code that displays the table after the lastest scores have been inputed:
// Display League Table
standings = document.getElementById("standings");
for (i = 0; i < League.length; i++)
{
row = standings.insertRow(i);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);
cell4 = row.insertCell(3);
cell5 = row.insertCell(4);
cell6 = row.insertCell(5);
cell7 = row.insertCell(6);
cell8 = row.insertCell(7);
cell1.innerHTML = League[i][0];
cell2.innerHTML = League[i][1];
cell3.innerHTML = League[i][2];
cell4.innerHTML = League[i][3];
cell5.innerHTML = League[i][4];
cell6.innerHTML = League[i][5];
cell7.innerHTML = League[i][6];
cell8.innerHTML = League[i][7];
}
After entering three scores this is what is displayed:
I've tried clearing the league array within javascript but still the same outcome. How do I only display top version of the table? Thanks
Thanks again to comments, and some further googling, the following deletes the table ahead of updating it, unless there's a better way?
for(var i = standings.rows.length - 1; i >= 0; i--)
{
standings.deleteRow(i);
}
Cheers everyone! :)
For your table update/question, focus on the updateRow function. This line does the actual update of contents of row rownum column(<td>) i
rows[rownum].getElementsByTagName('td')[i].innerHTML = coldata[i];
There is more here than just updating the table rows, for that you can review the function updateRow in my name-spaced object. updateRow calls createRow if it needs to (the row at that index does not exist), nothing fancy here, then updates the new row.
I use the array of match objects in matches I created (was not one in the question so I made assumptions) also in the namespace:
matches: [{
match: 1,
score: [{
team: "Ap",
score: 3
}, {
team: "Or",
score: 2
}]
}],
Note where I call this code to update the table for standings in the table with standings-table id. I have no idea what those are so I simply inserted some stuff in the array then update the table using
for (let i = 0; i < myLeague.standings.length; i++) {
myLeague.updateRow('standings-table', myLeague.standings[i], i);
}
Other things: I created the form simply to show how to update the table when a new match is inserted, I trigger an event and it does what it needs to update or insert a row - but really that is just to test the update as new matches are created.
Row in a table are either updated or inserted depending totally on the array of matches content
nothing handles deletions from the table or array since this was just about insert and update
if a row index for a match index does not exist, it creates a new row and updates it
var myLeague = myLeague || {
teamSelect1: "team1",
teamSelect2: "team2",
matchesPlayed: 1,
teams: [{
name: "Apples",
abbreviation: "Ap"
},
{
name: "Oranges",
abbreviation: "Or"
},
{
name: "Pears",
abbreviation: "Pe"
}
],
matches: [{
match: 1,
score: [{
team: "Ap",
score: 3
}, {
team: "Or",
score: 2
}]
}],
standings: [
["A", 2, 1, 1, 3, 2, 3, 0],
["B", 3, 1, 1, 3, 2, 3, 6]
],
cloneRow: function(tableid, objectRef) {
// find table to clone/append to
let table = document.getElementById(tableid);
// find row to clone, I use first one
let firstRow = mytable.rows[0];
// let row = document.getElementById("rowToClone");
let clone = firstRow.cloneNode(true); // copy children too
clone.id = ""; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
},
createRow: function(tableid, colCount, rowCount = 1, defaultContent = "") {
let row = document.createElement('tr'); // create row node
for (let i = 0; i < colCount; i++) {
let newText = document.createTextNode(defaultContent);
let col = row.insertCell(i);
col.appendChild(newText);
}
let table = document.getElementById(tableid); // find table to append to
let tbody = table.getElementsByTagName('tbody')[0];
for (let r = 1; r <= rowCount; r++) {
tbody.appendChild(row); // append row to table
}
},
updateRow: function(tableid, coldata = ['$nbsp;'], rownum = 0) {
let table = document.getElementById(tableid); // find table to update to
let tbody = table.getElementsByTagName('tbody')[0];
let rows = tbody.rows; // get rows node
let maxRows = 20; //keep it from going crazy adding rows
while (rows.length < maxRows && !rows[rownum]) {
this.createRow(tableid, coldata.length, 1, "x");
}
//myLeague.updateRow(tableid,coldata, rownum);
for (let i = 0; i < coldata.length; i++) {
rows[rownum].getElementsByTagName('td')[i].innerHTML = coldata[i];
}
},
addTeam: function(team, teamid) {
var sel = document.getElementById(teamid);
var optNew = document.createElement("option");
optNew.value = team.abbreviation;
optNew.text = team.name;
sel.add(optNew, null);
},
addTeamsToSelect: function() {
myLeague.teams.forEach(function(team) {
myLeague.addTeam(team, this.teamSelect1);
myLeague.addTeam(team, this.teamSelect2);
}, this);
},
listMatches: function(event) {
// event.target is the div
let src = event.target.dataset.source;
console.log("src:", src);
document.getElementById("matchplayed").textContent = event.matches;
this[src].forEach(function(item, index, array) {
document.getElementById('matchplayed').textContent = array.length;
let rowdata = [item.score[0].team, item.score[0].score, item.score[1].team, item.score[1].score];
this.updateRow(src, rowdata, index);
}, this);
},
clickAddListener: function(event) {
// 'this' is bound to the namespace object
// console.log(event.target); // the button
// console.log(this.matchesPlayed);//namespace
if (!document.getElementById(this.teamSelect1).value || !document.getElementById(this.teamSelect2).value) {
let errorEl = document.getElementById("form1")
.getElementsByClassName("error-text")[0];
errorEl.textContent = "Both teams need to be selected.";
errorEl.style.visibility = 'visible';
errorEl.style.opacity = '1';
setTimeout(function() {
errorEl.style.WebkitTransition = 'visibility .5s, opacity .5s';
errorEl.style.opacity = '0';
errorEl.style.visibility = 'hidden';
errorEl.textContent = "";
}, 5000);
} else {
this.matchesPlayed++;
let r = {
match: this.matchesPlayed,
score: [{
team: document.getElementById(this.teamSelect1).value,
score: document.getElementById("score1").value
}, {
team: document.getElementById(this.teamSelect2).value,
score: document.getElementById("score2").value
}]
};
this.matches.push(r);
}
document.getElementById('matches').dispatchEvent(this.showmatchesevent);
},
addListeners: function() {
let scope = this;
document.getElementById(this.teamSelect1)
.addEventListener('change', function() {
let s = document.getElementById(scope.teamSelect2);
let oval = s.value;
if (this.value == oval) {
s.value = '';
}
}, this);
document.getElementById(this.teamSelect2)
.addEventListener('change', function() {
let s = document.getElementById(scope.teamSelect1);
let oval = s.value;
if (this.value == oval) {
s.value = '';
}
}, this);
document.getElementById('add-match')
// bind this namespace to the event listener function
.addEventListener('click', (this.clickAddListener).bind(this), false);
this.showmatchesevent = new CustomEvent('showmatches');
document.getElementById('matches')
.addEventListener('showmatches', this.listMatches.bind(this), false);
}
};
window.onload = function() {
myLeague.addTeamsToSelect();
myLeague.addListeners();
for (let i = 0; i < myLeague.standings.length; i++) {
myLeague.updateRow('standings-table', myLeague.standings[i], i);
}
// set table from defaults/imported list
document.getElementById('matches').dispatchEvent(myLeague.showmatchesevent);
};
/* typography */
html {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
}
th {
letter-spacing: 2px;
}
td {
letter-spacing: 1px;
}
tbody td {
text-align: center;
}
.match-inputs {
border: solid 2px #DDDDDD;
padding;
1em;
margin: 1em;
}
.error-text {
height: 1em;
color: red;
}
.matches-played {
padding: 13m;
}
/* table layout */
table {
border-collapse: collapse;
border: 1px solid black;
}
.score th,
td {
padding: 0.2em;
border: solid #DDDDDD 1px;
}
.container {
padding: 1em;
}
<div class="container match-inputs">
<form id="form1">
<div>Add Matches</div>
<div class="input-group"><label>Choose L Team:</label>
<select id="team1">
<option value="">Choose</option>
</select>
</div>
<div class="input-group"><label>Choose L2 Team:</label>
<select id="team2">
<option value="">Choose</option>
</select>
</div>
<div class="input-group score-group"><label>Team1 score:</label>
<input id="score1" type="number" class="score-input" value="0" min="0" max="99" value="0" />
</div>
<div class="input-group score-group"><label>Team2 score:</label>
<input id="score2" type="number" class="score-input" value="0" min="0" max="99" value="0" />
</div>
<div class="input-group"><label>Add this match to the list.</label>
<button type="button" id="add-match">Add Match</button>
</div>
<div class="error-text"> </div>
</form>
</div>
<div class="container">
<div class="matches-played">Matches Played:<span id="matchplayed"></span></div>
<table id="matches" data-source="matches">
<thead>
<tr>
<th colspan="4">Matches</th>
</tr>
<tr>
<th>L</th>
<th>S</th>
<th>S2</th>
<th>L1</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<table id="standings-table">
<thead>
<tr>
<th colspan="8">Standings</th>
</tr>
<tr>
<th>Team</th>
<th>P</th>
<th>W</th>
<th>D</th>
<th>L</th>
<th>F</th>
<th>A</th>
<th>Pts</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
I am trying to perform search on 4 columns and expecting results to have union of the results.
For example : if keyword 'Test' is in two column in two different rows
then both rows should be displayed.
But currently I am able to search only on one column. Is there a way to search on multiple columns. My search function is below. Any suggestions are appreciated thank you.
function MySearch() {
// Declare variables
var input, filter, table, tr, td, td1,td2,td3, i;
input = document.getElementById("TxtSearch");
filter = input.value.toUpperCase();
table = document.getElementById("TblSearchData");
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("td")[0];
td1 = tr[i].getElementsByTagName("td")[1];
td2 = tr[i].getElementsByTagName("td")[2];
td3 = tr[i].getElementsByTagName("td")[3];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
if (td1) {
if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
else if (td2) {
if (td2.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
else if (td3) {
if (td3.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
Here is a partial jQuery version, should work even if you add rows since it starts from the top each time. I added a clear button just to show how to do that.
IF you wish to match ALL terms entered you would need to modify slightly like for "bunny fish" for example to only return 1 row.
Supports multiple terms (inclusive): try "red orange" or "black bunny"
Supports an empty search (shows all)
Does not support partial words.
Supports adding new columns.
$('#searchem').on('click', function() {
let searchText = $('#TxtSearch').val();
let searchTerms = searchText != ""? searchText.split(" "): [];
MySearch(searchTerms);
});
$('#clearem').on('click', function() {
let searchText = $('#TxtSearch');
searchText.val("");
let searchTerms = [];
MySearch(searchTerms);
});
function MySearch(terms) {
let searchTable = $('#TblSearchData');
let searchRows = searchTable.find('tbody').find('tr');
let searchValues = searchRows.find('td');
// console.log("terms:",terms.length);
searchValues.closest('tr').toggle(!terms.length); //hide em all
// show ones with matches
searchValues.filter(function(index, element) {
let found = false;
var fieldTerms = $(element).text().split(" ");
for (let term of fieldTerms) {
// console.log("term:", term);
if (terms.includes(term)) {
// console.log("Found:", term);
found = true;
break;
}
}
return found;
}).closest('tr').toggle(true);
// Declare variables
}
td {
border: solid blue 1px;
}
.found {
display: solid red 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input id="TxtSearch" type="text" />
<button id="searchem" type="button">Search</button><button id="clearem" type="button">Clear</button>
<table id="TblSearchData">
<tbody>
<tr>
<td>Row 1 blue fish</td>
<td>feet, what are feet</td>
<td>reep red</td>
<td>sad panda</td>
<td>black panda</td>
<td>cheese ball</td>
</tr>
<tr>
<td>Row 2 red fish</td>
<td>white fish</td>
<td>blue cat</td>
<td>orange moose</td>
<td>bunny fish</td>
<td>tish fish</td>
</tr>
<tr>
<td>Row 3 orange fish</td>
<td>wax moose</td>
<td>brown moose</td>
<td>walter here</td>
<td>gone tish</td>
<td>wonder what</td>
</tr>
<tr>
<td>Row 4 one fish</td>
<td>orange cow</td>
<td>moose cow with blue feet</td>
<td>chicken</td>
<td>chicken egg</td>
<td>petes dragon</td>
</tr>
</tbody>
</table>
Basically you have the idea..only i tweaked... the decision to show or not... after perform the search in all "td"...and no at the first occurs of them...because one td cancel the other...and not desired effect.... try the code below
Sorry for my English
function MySearch() {
// Declare variables
var input, filter, table, tr, td, td1,td2,td3, i;
input = document.getElementById("TxtSearch");
filter = input.value.toUpperCase();
table = document.getElementById("TblSearchData");
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("td")[0];
td1 = tr[i].getElementsByTagName("td")[1];
td2 = tr[i].getElementsByTagName("td")[2];
td3 = tr[i].getElementsByTagName("td")[3];
is_present = 0;
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
is_present = 1
}
}
if (td1) {
if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
is_present = 1
}
}
else if (td2) {
if (td2.innerHTML.toUpperCase().indexOf(filter) > -1) {
is_present = 1
}
}
else if (td3) {
if (td3.innerHTML.toUpperCase().indexOf(filter) > -1) {
is_present = 1
}
}
if (is_present == 1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
I'm wondering if there is a way for this search bar that I'm using to display multiple elements. As it is right now if I search for "123" in a pool with "321" "1234" "123" "12345" The only displayed value would be the first one: "1234". I'd like for all values that match my search to be displayed, therefore this would be the correct search result: "1234" "123" "12345".
Any answer is appreciated.
Here's the current code that I have:
var cells = document.querySelectorAll("#myTable td");
var search = document.getElementById("myInput");
search.addEventListener("keyup", function() {
if (search.value.length > 0 && search.value != '') {
for (var i = 0; i < cells.length; ++i) {
if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) {
cells.forEach(function(element) {
element.style.display = "none";
});
cells[i].style.display = "table-cell";
break;
} else {
cells.forEach(function(element) {
if (cells[i] !== element) {
element.style.display = "table-cell";
}
});
}
}
} else {
cells.forEach(function(element) {
if (cells[i] !== element) {
element.style.display = "table-cell";
}
});
}
});
<input id="myInput">
<table id="myTable">
<tr>
<td>321</td>
<td>123</td>
</tr>
<tr>
<td>1234</td>
<td>abc</td>
</tr>
<tr>
<td>12345</td>
<td>abcde</td>
</tr>
</table>
Your cells selector returns a nodelist this is an arrayish object. That doesn't have the forEach function.
However we can borrow from the Array object:
Array.prototype.forEach
What I did to solve the other problem is create an indexArray as a lookup array. that keeps track of the indices that contained the search string. Then when we loop all the cells we can turn the ones of that don't show up in the lookup array
var cells = document.querySelectorAll("#myTable td");
var search = document.getElementById("myInput");
search.addEventListener("keyup", function() {
var indexArray = []; //look up array
for (var i = 0; i < cells.length; ++i) {
//restore the cells:
cells[i].style.display = "table-cell";
//if search value is found the value will be 0 if it starts a the beginning
if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) {
indexArray.push(i); //push index into lookup
}
}
//loop over all cells
Array.prototype.forEach.call(cells, function(element, index) {
if (indexArray.indexOf(index) === -1) //if index is not present in look up, set display to none
element.style.display = "none";
});
});
<input id="myInput">
<table id="myTable">
<tr>
<td>321</td>
<td>123</td>
</tr>
<tr>
<td>1234</td>
<td>abc</td>
</tr>
<tr>
<td>12345</td>
<td>abcde</td>
</tr>
</table>
below code is enough if you want to show which cell has contain that search; also you can test on jsfiddle https://jsfiddle.net/bzcdomjs/
var cells = document.querySelectorAll("#myTable td");
var search = document.getElementById("myInput");
search.addEventListener("keyup", function() {
for (var i = 0; i < cells.length; ++i) {
cells[i].style.display = "table-cell";
if (search.value.length > 0 && search.value != '') {
if(cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === -1) {
cells[i].style.display = "none";
}
}
});
Searching Stack Overflow I was able to filter rows in real time, but I need to be more specific.
Right now I'm using this code:
HTML:
<input type="text" id="search" placeholder="Write here to filter">
Script:
$(document).ready(function(){
var $rows = $('#catalogo tbody tr');
$rows.splice(0,1);
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase().split(' ');
$rows.hide().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
var matchesSearch = true;
$(val).each(function(index, value) {
matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value);
});
return matchesSearch;
}).show();
});
});
Script based on this: How to perform a real time search and filter on a HTML table
What I would like to do is be able to have 4 different inputs, each one filtering first, second, third and fourth cells of each row (to be able to filter by title, author, year and max price).
How could I acomplish this?
Thanks to blackandorangecat's link I managed to put something together.
HTML:
<label class = "text">Título:<input type="text" id="stitulo" onkeyup="filter(this, 0)" style="margin: 0 auto;"/></label>
<label class = "text">Autor:<input type="text" id="sautor" onkeyup="filter(this, 1)" style="margin: 0 auto;"/></label>
<label class = "text">Año:<input type="text" id="sano" onkeyup="filter(this, 3)" size="1" style="margin: 0 auto;"/></label>
<label class = "text">Precio máximo:<input type="text" id="sprecio" onkeyup="filterNum(this, 4)" size="1" style="margin: 0 auto;"/></label>
JavaScript:
function filter(x, y) {
// Declare variables
var input, filter, table, tr, td, i;
input = x;
filter = input.value.toUpperCase();
table = document.getElementById("catalogo");
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("td")[y];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function filterNum(x, y) {
// Declare variables
var input, filter, table, tr, td, i;
input = x;
if(input.value === "") {
filter = 0.;
}
else filter = parseFloat(input.value);
table = document.getElementById("catalogo");
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("td")[y];
if (td) {
if ((filter >= parseFloat(td.innerHTML)) || filter === 0) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
Hopefully this will help other people too.
I am using datatables to dynamically create a table and populate it with data. So far so good. Then I try to use onclick() to make certain td elements clickable so they redirect me to another page.
The problem is: clicking on the td's does absolutely nothing in Chrome. It works fine in IE though.
Here's the html code.
<body id="dt_example">
<form>
<input type="hidden" name="currency_numberOfRows" id="currency_numberOfRows" value="<%=currency_numberOfRows %>"></input>
<input type="hidden" name="currency_numberOfColumns" id="currency_numberOfColumns" value="<%=currency_numberOfColumns %>"></input>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="currency_example" tableType="currency_clickableTDs">
<thead><tr>
<th class="heading"></th>
<th class="heading"><%=header_data%></th>
<th>% of Total</th>
<th>Total</th>
</tr></thead>
<tbody>
<tr class="odd">
<th class="heading">*Dynamically Added Heading*</th>
<td valign=middle class="underline">***Clickable Cell***</td>
<td valign=middle>*Dynamically Added Data*</td>
<td valign=middle>*Dynamically Added Data*</td>
</tr>
</tbody>
</table>
</div>
The javascript code is
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var counter=(document.getElementById("currency_numberOfColumns").value)*2+1;
var tempaoColumns = [];
for(i=0;i<=counter;i++){
if(i==0)
{tempaoColumns[i] = null;}
else
{ tempaoColumns[i] = { "sType": "numeric-comma" };}
}
$('table.display').dataTable({
"aoColumns": tempaoColumns,
"sDom": 'T<"clear">lfrtip',
"aaSorting": [[ 1, "desc" ]]
});
} );
</script>
and
function setTDOnclickEvents(val){
var pageFrom = val;
var colHeaders = [];
var rowHeaders = [];
var numberOfColumns = document.getElementById("currency_numberOfColumns").value;
var numberOfRows = document.getElementById("currency_numberOfRows").value;
var table=document.getElementById("currency_example");
for (var h=0; h <= numberOfColumns*2; h++) {
//find every TR in a "clickableTDs" type table
colHeaders[h]= (table.rows[0].cells[h].innerHTML);
//alert(h)
//alert(table.rows[0].cells[h].innerHTML)
}
for (var h=0; h < numberOfRows/2; h++) {
//find every TR in a "clickableTDs" type table
if(h==0)
rowHeaders[h]= (table.rows[h].cells[0].innerHTML);
else if(h==1){
rowHeaders[h]= (table.rows[numberOfRows/2].cells[0].innerHTML);}
Uncaught TypeError: Cannot read property 'cells' of undefined in the above line
else
rowHeaders[h]= (table.rows[h-1].cells[0].innerHTML);
}
var allTRs = new Array();
//go through all elements
if(document.forms[0].tab.value=="Currency"){
for (var h=0; h < document.all.length; h++) {
//find every TR in a "clickableTDs" type table
if (document.all[h].tagName == "TR" &&
document.all[h].parentElement.parentElement.tableType == "currency_clickableTDs") {
allTRs.push(document.all[h]);
}
}
}
else if(document.forms[0].tab.value=="Service"){
for (var h=0; h < document.all.length; h++) {
//find every TR in a "clickableTDs" type table
if (document.all[h].tagName == "TR" &&
document.all[h].parentElement.parentElement.tableType == "service_clickableTDs") {
allTRs.push(document.all[h]);
}
}
}
else if(document.forms[0].tab.value=="Project"){
for (var h=0; h < document.all.length; h++) {
//find every TR in a "clickableTDs" type table
if (document.all[h].tagName == "TR" &&
document.all[h].parentElement.parentElement.tableType == "project_clickableTDs") {
allTRs.push(document.all[h]);
}
}
}
else if(document.forms[0].tab.value=="Location"){
for (var h=0; h < document.all.length; h++) {
//find every TR in a "clickableTDs" type table
if (document.all[h].tagName == "TR" &&
document.all[h].parentElement.parentElement.tableType == "location_clickableTDs") {
allTRs.push(document.all[h]);
}
}
}
for (var i=1; i < allTRs.length; i++) {
for (var j=1; j < allTRs[i].cells.length; j++) {
allTRs[i].cells[j].colHeader = colHeaders[j];
allTRs[i].cells[j].rowHeader = rowHeaders[i];
allTRs[i].cells[j].onclick = function (){
if(this.innerHTML == "0.00" || this.innerHTML == "0"){
alert("No data to represent!!!");
}else{
if((pageFrom == "GrossRevenueLevel") && (this.colHeader != "% of Total")&&(this.colHeader != "TOTAL")){
goMyController(this.colHeader,this.rowHeader);
}
}}
} } }
Could someone please help me? Thanks in advance and sorry for the painfully long code.
P.S. I didn't put the entire html code as it would be too lengthy
I found a solution. I replaced the javascript code with
function setTDOnclickEvents(val){
var pageFrom = val;
var bhal=$("#tab").val();
if(bhal=="Currency"){
var $tables = $("#currency_example tr");
}
else if(bhal=="Service"){
var $tables = $("#service_example tr");
}
else if(bhal=="Project"){
var $tables = $("#project_example tr");
}
else if(bhal=="Location"){
var $tables = $("#location_example tr");
}
$tables.each(function (i, el) {
var $tds = $(this).find('td.underline');
$tds.click(function(){
var hetch = $(this).html();
var hindex = $(this).index();
var colHeada= $tds.closest('table').find('th').eq(hindex).html();
var rowHeada= $tds.closest('tr').find('th').html();
if(hetch == "0.00" || hetch == "0"){
alert("No data available for this selection.");
}else{
if((pageFrom == "GrossRevenueLevel") && (colHeada != "% of Total")&&(colHeada != "TOTAL")){
alert(colHeada);
alert(rowHeada);
}
}
});
});
}
and it's working now.