I've have a html table where I'm trying to filter by keeping the rows that match on the text written. But whatever I write in my textbox the first row is always removed..
JS:
$("#searchInput").keyup(function () {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr");
if (this.value == "") {
jo.show();
return;
}
//hide all the rows
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
return true;
}
}
return false;
})
//show the rows that match.
.show();
}).focus(function () {
this.value = "";
$(this).css({
"color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});
Table:
<input id="searchInput" value="Type To Filter">
<br/>
<table class="mGrid" id="table">
<tr>
<th>
COLUMN1
</th>
<th>
COLUMN2
</th>
<th>
COLUMN3
</th>
</tr>
<tbody ID="fbody">
<tr>
<td>
NAME1
</td>
<td>
3
</td>
<td>
HOUSE
</td>
</tr>
<tr>
<td>
NAME2
</td>
<td>
5
</td>
<td>
LAKE
</td>
</tr>
<tr>
<td>
NAME3
</td>
<td>
7
</td>
<td>
DOG
</td>
</tr>
<tr>
<td>
NAME555
</td>
<td>
1337
</td>
<td>
CAT
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/ukW2C/1350/
Problem was with the HTML. I had multiple IDs. Query is now updated and working
Related
I have this counter for word occurrence in the textarea. The problem is, I have a lot of items in the table, and so it can be distracting to include the zero results.
So what I'm hoping to achieve is, if the user checks the checkbox, it will not show the zero results anymore (preferably the whole row)..
Please see the code so far:
let textarea = $('#textarea3');
textarea.on('keyup', _ => counting());
function counting() {
var searchText = $('#textarea3').val();
let words = [];
words['1 sample'] = '#one';
words['2 sample'] = '#two';
words['3 sample'] = '#three';
words['4 sample'] = '#four';
words['5 sample'] = '#five';
words['6 sample'] = '#six';
for (const word in words) {
var outputDiv = $(words[word]);
outputDiv.empty();
let count = searchText.split(word).length - 1;
searchText = searchText.replaceAll(word,'');
outputDiv.append('<a>' + count + '</a>');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox">
<label> Don't show zero results</label><br>
<button onclick="counting();">Count</button>
<table>
<thead>
<tr>
<th scope="col">Items</th>
<th scope="col">Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 sample</td>
<td><a id="one"></a></td>
</tr>
<tr>
<td>2 sample</td>
<td><a id="two"></a></td>
</tr>
<tr>
<td>3 sample</td>
<td><a id="three"></a></td>
</tr>
<tr>
<td>4 sample</td>
<td><a id="four"></a></td>
</tr>
<tr>
<td>5 sample</td>
<td><a id="five"></a></td>
</tr>
<tr>
<td>6 sample</td>
<td><a id="six"></a></td>
</tr>
</tbody>
</table>
<textarea id="textarea3" rows="5">
1 sample
2 sample
3 sample
5 sample
</textarea>
If the checkbox isn't checked, it should function as is and still show all results.
I've seen this post but I'm not really sure how to implement it to my own project. Show or hide table row if checkbox is checked
Thank you in advance for any help.
Consider the following.
$(function() {
var textarea = $('#textarea3');
var words = [];
$("table tbody tr").each(function(i, row) {
words.push({
term: $("td:eq(0)", row).text().trim(),
rel: "#" + $("a", row).attr("id"),
count: 0
});
});
function count() {
var searchText = textarea.val();
$.each(words, function(i, word) {
if (searchText.indexOf(word.term) >= 0) {
var re = new RegExp('(' + word.term + ')', 'gi');
word.count = searchText.match(re).length;
$(word.rel).html(word.count);
} else {
word.count = 0;
if (!$("#noShowZero").is(":checked")) {
$(word.rel).html(word.count);
} else {
$(word.rel).html("");
}
}
});
}
textarea.keyup(count);
$("#count-btn, #noShowZero").click(count);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="noShowZero" type="checkbox">
<label> Don't show zero results</label><br>
<button id="count-btn">Count</button>
<table>
<thead>
<tr>
<th scope="col">Items</th>
<th scope="col">Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 sample</td>
<td>
<a id="one"></a>
</td>
</tr>
<tr>
<td>2 sample</td>
<td>
<a id="two"></a>
</td>
</tr>
<tr>
<td>3 sample</td>
<td>
<a id="three"></a>
</td>
</tr>
<tr>
<td>4 sample</td>
<td>
<a id="four"></a>
</td>
</tr>
<tr>
<td>5 sample</td>
<td>
<a id="five"></a>
</td>
</tr>
<tr>
<td>6 sample</td>
<td>
<a id="six"></a>
</td>
</tr>
</tbody>
</table>
<textarea id="textarea3" rows="5">
1 sample
2 sample
3 sample
5 sample
</textarea>
When the User:
Enters text in the textbox
Clicks the checkbox
Clicks the Button
then count function is executed.
Count will review all the words and look for specific keywords. A count of them is also retained, as well as element relationship to show that count.
Using Regular Expressions, we can search for the words in the text and count them using .match(). It returns an Array of the matches. You could also use .replace(), to remove them.
My for loop will iterate multiple times but any changes I want to make to the cells only happens in the first row. The counters for the rows and the cells all go up but the only cells that are updated are the ones in the first row. I've even examined through the console and nothing is happening to the other rows.
Note: I only want the cells with the ID's to be updated
var table = document.getElementById("myTable");
for (var r = 0, n = table.rows.length; r < n; r++) //for every row
{
for (var c = 0, m = table.rows[r].cells.length; c < m; c++) //for every cell
{
var x = document.getElementsByTagName("td")[c];
console.log("row counter " + r);
console.log("cell counter " + c);
if (x.id == "wed_asso") {
schedule_wed();
x.innerHTML = wed_associate;
}
if (x.id == "asso") {
schedule();
x.innerHTML = associate;
}
}
}
<table id="myTable">
<tr>
<th> </th>
<th> Wednesday </th>
<th> Thursday</th>
<th> Friday</th>
<th> Saturday</th>
<th> Thursday</th>
<th> Friday</th>
<th> Saturday</th>
</tr>
<tr>
<td> TDR</td>
<td>John</td>
<td id="asso"></td>
<td>Alec</td>
<td id="asso"></td>
<td id="asso"></td>
<td>Alec</td>
<td id="asso"></td>
</tr>
<tr>
<td> </td>
<td id="wed_asso"> </td>
<td id="asso"> </td>
<td id="asso"> </td>
<td id="asso"> </td>
<td id="asso"> </td>
<td id="asso"> </td>
<td id="asso"> </td>
</tr>
</table>
I am working with two bits of text contained in <div> tags. One contains the items, the other contains quantity. However, sometimes I have multiple items that are the same with different quantities, therefore I cannot just count the occurrences of a string (I started by using this method and discovered that it only works if quantity is 1).
This is the code I am working with:
var joinArr = $('#rechighlight').html(); //get the recieved items
var qtyArr = $('#qtyArray').html(); //get the recieved qty
var createArr = joinArr.trim().split('<br>'); //split by br tag
var createArrQty = qtyArr.trim().split('<br>'); //split by br tag
var resultingArr = [createArr, createArrQty] //creates array in correct order
.reduce((r, a) => (a.forEach((a, i) => (r[i] = r[i] || []).push(a)), r), [])
.reduce((a, b) => a.concat(b));
var stringArr = JSON.stringify(resultingArr); //stringify results
document.getElementById("finArray").innerHTML = stringArr; //add results into new div
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
Items
</td>
<td>
QTY
</td>
</tr>
<tr>
<td>
<div id="orderhighlight">AAA <br> BBB<br>CCC<br></div>
</td>
<td>
<div>5<br>3<br>2<br></div>
</td>
</tr>
<tr>
<td>
Recieved Items
</td>
<td>
Recieved QTY
</td>
</tr>
<tr>
<td>
<div id="rechighlight">AAA<br>BBB<br>AAA<br>CCC<br>CCC<br></div>
</td>
<td>
<div id="qtyArray">3<br>3<br>2<br>1<br>1<br></div>
</td>
</tr>
<tr>
<td>
MY OUTPUT
</td>
</tr>
<tr>
<td>
<div id="finArray"></div>
</td>
</tr>
<tr>
<td>
EXPECTED OUTPUT
</td>
</tr>
<tr>
<td>
<div>["AAA","5","BBB","3","CCC","2","",""]</div>
</td>
</tr>
</table>
What I've Tried:
I found a way to merge duplicated values on the item side by using the following code.
var occurrences = resultingArr.reduce(function(obj, item) {
obj[item] = (obj[item] || 0) + 1;
return obj;
}, {});
But of course, the issue there is that the quantity is seen as a string to merge.
In summary, how do I merge duplicate string in an array and their quantity (as reflected in the expected output on HTML line 52).
Your reduce function just needs to be constructed in the following way:
var occurrences = createArr.reduce(function(obj, item, index) {
obj[item] = Number(obj[item] || 0) + Number(createArrQty[index]);
return obj;
}, {});
reduce the first array with the keys, and sum the array with the quantities.
Although you need to remove the last item from each array since it is an empty value from your .split function.
Just do a pop() in both of them.
Code below.
var joinArr = $('#rechighlight').html(); //get the recieved items
var qtyArr = $('#qtyArray').html(); //get the recieved qty
var createArr = joinArr.trim().split('<br>'); //split by br tag
var createArrQty = qtyArr.trim().split('<br>'); //split by br tag
createArr.pop();
createArrQty.pop();
var occurrences = createArr.reduce(function(obj, item, index) {
obj[item] = Number(obj[item] || 0) + Number(createArrQty[index]);
return obj;
}, {});
var stringArr = JSON.stringify(occurrences); //stringify results
document.getElementById("finArray").innerHTML = stringArr; //add results into new div
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
Items
</td>
<td>
QTY
</td>
</tr>
<tr>
<td>
<div id="orderhighlight">AAA <br> BBB<br>CCC<br></div>
</td>
<td>
<div>5<br>3<br>2<br></div>
</td>
</tr>
<tr>
<td>
Recieved Items
</td>
<td>
Recieved QTY
</td>
</tr>
<tr>
<td>
<div id="rechighlight">AAA<br>BBB<br>AAA<br>CCC<br>CCC<br></div>
</td>
<td>
<div id="qtyArray">3<br>3<br>2<br>1<br>1<br></div>
</td>
</tr>
<tr>
<td>
MY OUTPUT
</td>
</tr>
<tr>
<td>
<div id="finArray"></div>
</td>
</tr>
<tr>
<td>
EXPECTED OUTPUT
</td>
</tr>
<tr>
<td>
<div>["AAA","5","BBB","3","CCC","2","",""]</div>
</td>
</tr>
</table>
I am writing c# application . I have to filter Js table using multiple inputs. When i type something into only one input it works fine, but if I want to search table for example by "Service Price" and "Parts Price" it finds nothing.
<form id="search-repairs">
<p>
Service Price : <input type="text" id="searchServicePrice" class="searchInput" onkeyup="searchingEngine(3)" />
Parts Price : <input type="text" id="searchPartsPrice" class="searchInput" onkeyup="searchingEngine(2)" />
Summary Price : <input type="text" id="searchBySumPrice" class="searchInput" onkeyup="searchingEngine(5)" />
Date : <input type="text" id="searchDate" class="searchInput" onkeyup="searchingEngine(0)" />
</p>
</form>
<table id="table" class="table table-striped table-hover">
<thead>
<tr>
<th>
Date
</th>
<th>
Description
</th>
<th>
PartsPrice
</th>
<th>
Price
</th>
<th>
ServicerId
</th>
<th>
summaryPrice
</th>
</tr>
</thead>
<tbody id="searchBody">
#foreach (var item in Model)
{
var price = item.Price;
var partsPrice = item.PartsPrice;
var sum = price + partsPrice;
<tr>
<td>
#Html.DisplayFor(modelItem => item.Date)
</td>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.PartsPrice)
</td>
<td name="price">
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
#Html.DisplayFor(modelItem => item.ServicerId)
</td>
<td>
#Html.DisplayFor(modelItem => sum);
</td>
</tr>
}
</tbody>
</table>
And here is my code to filter this table. It is plain javascript code. I think there is something wrong in filter variable. I have tried a lot of different solutions but it didn't want to work in any case.
function searchingEngine(col) {
var table, trs, searchByPrice, searchByPartsPrice, searchByDate, searchBySumPrice, filter, i, td;
table = document.getElementById("table");
trs = table.getElementsByTagName("tr");
searchByPrice = document.forms['search-repairs'].querySelector("#searchServicePrice");
searchByPartsPrice = document.forms['search-repairs'].querySelector("#searchPartsPrice");
searchByDate = document.forms['search-repairs'].querySelector("#searchDate");
searchBySumPrice = document.forms['search-repairs'].querySelector("#searchBySumPrice");
filter = searchByPrice.value.toUpperCase() || searchByPartsPrice.value.toUpperCase() ||
searchByDate.value.toUpperCase() || searchBySumPrice.value.toUpperCase();
for (i = 0; i < trs.length; i++) {
td = trs[i].getElementsByTagName("td")[col];
if (td) {
if (td.textContent.toUpperCase().indexOf(filter) > -1) {
trs[i].style.display = "";
} else {
trs[i].style.display = "none";
}
}
}
}
I have a table where I want to filter the rows on the basis of column values.
<input id="searchInput" value="Column 1 Filter">
<input id="searchInput2" value="Column 2 Filter">
<br/>
<table id="myTable">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody id="fbody">
<tr>
<td>cat</td>
<td>one</td>
</tr>
<tr>
<td>dog</td>
<td>two</td>
</tr>
<tr>
<td>cat</td>
<td>three</td>
</tr>
<tr>
<td>moose</td>
<td>four</td>
</tr>
</tbody>
</table>
I am using filter method of jquery :
$("#searchInput").keyup(function () { // or searchInput2
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr");
if (this.value == "") {
jo.show();
return;
}
//hide all the rows
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
// only filter on the basis of first column
var $t = $("#myTable tr td:first-child")
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
return true;
}
}
return false;
})
//show the rows that match.
.show();
})
.......
............
But it doesn't work property. Also I don't want to use any plugin like data table.