Good Morning
I've this code of JS and I want to use it in VB but I don't know how what I want to achieve is to filter data from table if I'm searching.
$(document).ready(function() {
var activeSystemClass = $('.list-group-item.active');
//something is entered in search form
$('#system-search').keyup( function() {
var that = this;
// affect all table rows on in systems table
var tableBody = $('.table-list-search tbody');
var tableRowsClass = $('.table-list-search tbody tr');
$('.search-sf').remove();
tableRowsClass.each( function(i, val) {
//Lower text for case insensitive
var rowText = $(val).text().toLowerCase();
var inputText = $(that).val().toLowerCase();
if(inputText != '')
{
$('.search-query-sf').remove();
tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'
+ $(that).val()
+ '"</strong></td></tr>');
}
else
{
$('.search-query-sf').remove();
}
if( rowText.indexOf( inputText ) == -1 )
{
//hide rows
tableRowsClass.eq(i).hide();
}
else
{
$('.search-sf').remove();
tableRowsClass.eq(i).show();
}
});
//all tr elements are hidden
if(tableRowsClass.children(':visible').length == 0)
{
tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
}
});
});
Related
I have a website with three tables on it and a JavaScript search compoment that allows the user to search each table. However because the JavaScript refers to the tag and not a specific ID for each table, it means when the user searches it searches all tables. How can I write in JavaScript that it must refer to X
Here's my JavaScript:
$(document).ready(function () {
$(".search").keyup(function () {
var searchTerm = $(".search").val();
var listItem = $('.results tbody').children('tr');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
$.extend($.expr[':'], {
'containsi': function (elem, i, match, array) {
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function (e) {
$(this).attr('visible', 'false');
});
$(".results tbody tr:containsi('" + searchSplit + "')").each(function (e) {
$(this).attr('visible', 'true');
});
var jobCount = $('.results tbody tr[visible="true"]').length;
$('.counter').text(jobCount + ' item');
if (jobCount == '0') {
$('.no-result').show();
} else {
$('.no-result').hide();
}
});
});
Thanks in advance! :)
two way :
adding an id on your table and working with$("#myID") Jquery
work with the DOM object that make the call : <table onclick="f(this)">
Table search functionality for multiple columns using jQuery?
<table>
<tr>
<th><input type="text" id="search" placeholder=" live search"></input></th>
<th><input type="text" id="search" placeholder=" live search"></input></th>
</tr>
<tr><th>Unique ID</th><th>Random ID</th></tr>
<tr><td>214215</td><td>442</td></tr>
<tr><td>1252512</td><td>556</td></tr>
<tr><td>2114</td><td>4666</td></tr>
<tr><td>3245466</td><td>334</td></tr>
<tr><td>24111</td><td>54364</td></tr>
</table>
<br />
<script>
$("#search").on("keyup", function() {
var value = $(this).val();
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:first").text();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
</script>
I am trying to implement the search functionality without using jquery plugins..
jsfiddle Link here
http://jsfiddle.net/y9Lxdvps/1/
Use https://api.jquery.com/index/
var inputs = $('table tr:first th input[type=text]');
var trs = $('table tr + tr + tr');
inputs.keyup(function()
{
trs.each(function()
{
var tr = $(this);
var show = inputs.toArray().every(function(input, index)
{
var value = $(input).val();
if (value === '')
{
return true;
}
var number = index + 1;
var td = tr.children('td:nth-child(' + number + ')');
var text = td.text();
return text.indexOf(value) != -1;
});
tr[show ? 'show' : 'hide']();
});
});
I have this script for searching in table with Highlighting value from "input". But only for first TD in all TR.
Function remove Highlighting
function removeHighlighting(highlightedElements){
highlightedElements.each(function(){
var element = $(this);
element.replaceWith(element.html());
})
}
Function add Highlighting
function addHighlighting(element, textToHighlight){
var text = element.text();
var highlightedText = '<em>' + textToHighlight + '</em>';
var newText = text.replace(textToHighlight, highlightedText);
element.html(newText);
}
Searching in table but only in first TD in TR
$("#search").on("keyup", function() {
var value = $(this).val();
removeHighlighting($("table tr em"));
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var $tdElement = $row.find('td:first');
var id = $tdElement.text();
var matchedIndex = id.indexOf(value);
if (matchedIndex != 0) {
$row.hide();
}
else {
addHighlighting($tdElement, value);
$row.show();
}
}
});
});
I don´t know how can I searching in all TD and How can I write e.g. some alert if "matchedIndex == -1" (if not found some value from input)
Try looping in all TDs of TR
$("table tr").each(function(index) {
if (index !== 0) {
row = $(this);
$("td", this).each(function(idx) {
var id = $(this).text(); //or $(this).innerText
var matchedIndex = id.indexOf(value);
if (matchedIndex != 0) {
$row.hide();
}
else {
addHighlighting($tdElement, value);
$row.show();
}
}
}
});
A short way
$("table tr > td em").each(function(){
$( this ).replaceWith( $( this ).text() );
});
Adding a span tag with a highlight class is the way to go like suggested in the comments.
Please find a working demo below and in this jsFiddle.
There is a really useful function to remove all the wrapping of the spans. You can do this with $('span.highlight').contents().unwrap().
For finding the text you can use string.search(searchText) or string.match(searchText). The search method will return -1 if nothing is found and the position of the text if found. And match would return occurences in the searchText.
For testing that it finds the first occurence I have added TestY in the table. The flag matched is responsible for this behavior. If you would remove it, it would highlight both TestY elements.
(function () {
var removeHighlight = function () {
$('span.highlight').contents().unwrap();
};
var wrapContent = function (index, $el, text) {
var $highlight = $('<span class="highlight"/>')
.text(text.substring(0, index));
//console.log(text.substring(0, index));
var normalText = document.createTextNode(text.substring(index, text.length));
//console.log(index, $highlight.text(), normalText);
$el.html($highlight).append(normalText);
};
var highlightTextInTable = function ($tableElements, searchText) {
// highlights if text found (during typing)
var matched = false;
//remove spans
removeHighlight();
$.each($tableElements, function (index, item) {
var $el = $(item);
if ($el.text().search(searchText) != -1 && !matched) {
//console.log("matched", $el, $el.html());
wrapContent(searchText.length, $el, $el.html());
//console.log(searchText, $el.text());
if (searchText == $el.text()) {
// found the entry
//console.log("matched");
matched = true;
}
}
});
};
$(function () {
//load table into object
var $tableRows = $('table tr');
var $tableElements = $tableRows.children();
//console.log($tableRows, $tableElements);
$('#search').on('keyup', function (e) {
var searchText = $(this).val();
if (searchText.length == 0) {
// catches false triggers with empty input (e.g. backspace delete or case lock switch would trigger the function)
removeHighlight(); // remove last remaining highlight
return;
}
highlightTextInTable($tableElements, searchText);
});
});
})();
.highlight {
background-color: #00FFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<table>
<tr>
<td>TestX</td>
<td>Test1.2</td>
<td>Test1.3</td>
<td>Test1.4</td>
</tr>
<tr>
<td>Test2.1</td>
<td>TestY</td>
<td>Test2.3</td>
<td>Test2.4</td>
</tr>
<tr>
<td>Test3.1</td>
<td>TestY</td>
<td>Test3.3</td>
<td>Test3.4</td>
</tr>
</table>
I'm aware there are similar questions to this but have looked at several and none have provided and actual solution.
I have a function that populates a table with row when the page loads if there are items to fill it with. This works fine in all browsers except IE8. If you refresh the page then the works as it should, however in IE8 if you simply navigate to the page the table is unchanged. I have put break points in the js in Developer Tools and the function was called and reached the end without error and when I examined the objects the table did contain the rows it was supposed to as far as the object was concerned but rows were not rendered in the actual table on the page.
Here is the code at the bottom of the page:
<script type="text/javascript">
$(document).ready(function () {
addToTicketTable('12345');
});
</script>
Any thoughts?
Edit
Yes I am using tbody and function works fine when called by selecting a seat on the page or refreshing the page. It's only when navigating to the page that it doesn't work correctly.
As requested here is the code for the addToTicketTable function.
function addToTicketTable(seatId) {
var zone = $("#ddlSections").val();
var sectText = $("#ddlSections option:selected").text();
var sectName = sectText.split(":")[0]
var sect = sectText.split(" ")[0];
if (sectText.toLowerCase().indexOf(" box") >= 0) {
sect += " " + sectText.split(" ")[1];
}
var seat = "Best Available";
var priceType = -1;
var seatInfo = "";
if ($(".dvSeat").length > 0) {
var arrInfo = document.getElementById(seatId).getElementsByTagName("input")[0].value.split(",");
priceType = arrInfo[4];
sect = arrInfo[3];
if ($("#" + seatId).attr("class").indexOf(" box") >= 0) {
sect += " box";
}
seat = arrInfo[0] + arrInfo[1];
if ($("#" + seatId).attr("class").indexOf("restrictedView") > -1) {
seatInfo = "Restricted View";
}
if ($("#" + seatId).attr("class").indexOf("standingSeat") > -1) {
seatInfo = "Standing Ticket";
}
if ($("#" + seatId).attr("class").indexOf("wheelchair") > -1) {
seatInfo = "Wheel Chair Space";
}
if ($("#" + seatId).attr("class").indexOf("behindConductor") > -1) {
seatInfo = "Behind Conductor";
}
if ($("#" + seatId).attr("class").indexOf("noSurtitles") > -1) {
seatInfo = "Surtitles not visible";
}
if ($("#" + seatId).attr("class").indexOf("restrictedLegRoom") > -1) {
seatInfo = "Restricted Leg Room";
}
zone = arrInfo[2];
}
var tdSect = document.createElement("td");
tdSect.innerHTML = sectName;
var tdSeat = document.createElement("td");
tdSeat.innerHTML = seat;
if (seatInfo.length > 0) {
tdSeat.innerHTML += " (" + seatInfo + ")";
}
var hdSeat = document.createElement("input");
hdSeat.id = "tblHd" + seatId;
hdSeat.className = "seatHD";
hdSeat.type = "hidden";
hdSeat.value = seatId;
$(tdSeat).append(hdSeat);
var tdTicket = document.createElement("td");
var ddl = document.createElement("select");
ddl.id = "ddlTicket" + seatId;
ddl.className = "ddlTicket";
var ddlStr = "";
if (document.getElementById("ddl" + zone) != null) {
ddlStr = "ddl" + zone;
} else {
ddlStr = "ddl" + sect.split(":")[0];
if (ddlStr.indexOf(" ") > -1) {
ddlStr = ddlStr.split(" ")[0];
}
}
$("#" + ddlStr + " option").each(function () {
var arrVal = this.value.split(',');
if (arrVal[0] == zone) {
var selected = false;
if (priceType != null) {
if (this.value.split(',')[1] == priceType) {
selected = true;
}
}
if (selected) {
$(ddl).append($("<option></option>").attr("value", this.value).text(this.text).attr("selected", "true"));
} else {
$(ddl).append($("<option></option>").attr("value", this.value).text(this.text));
}
}
});
$(ddl).change(function () {
$("#lblPrice" + seatId).html($(this).val().split(',')[2]);
updateSeatInfo();
});
$(tdTicket).append(ddl);
var tdPrice = document.createElement("td");
var lblPrice = document.createElement("span");
lblPrice.id = "lblPrice" + seatId;
$(tdPrice).append(lblPrice);
var tdRemove = document.createElement("td");
var btnRemove = document.createElement("span");
btnRemove.className = "btnRem";
$(btnRemove).click(function () {
remSeat(seatId);
});
$(tdRemove).append(btnRemove);
var tr = document.createElement("tr");
tr.id = "tr" + seatId;
$(tr).append(tdSect);
$(tr).append(tdSeat);
$(tr).append(tdTicket);
$(tr).append(tdPrice);
$(tr).append(tdRemove);
$("#tblSeats tbody").append(tr);
$("#lblPrice" + seatId).html($(ddl).val().split(',')[2]);
}
So I'm speculating a little here since enough code wasn't provided to fully determine the problem, so I'll share my experience with appending rows in IE8.
More than likely, you have a simple table structure like this:
<table>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Stuff</td>
</tr>
</table>
and your script is something like this:
<script>
$("table").append("<tr><td>More Stuff</td></tr>");
</script>
Well, IE8 doesn't allow you to append directly to a <table> element. Instead, it requires that you set up the table structure correctly and append to a <tbody> element instead. Like so:
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stuff</td>
</tr>
</tbody>
</table>
and your jQuery would have to change to reflect the append to the <tbody> element:
<script>
$("tbody").append("<tr><td>More Stuff</td></tr>");
</script>
I need to filter 2 different tables from 1 search/filter input
Now, this code below is working on filtering one table that has the table1 ID
#searchInput is the ID of the text field I'm using
$("#searchInput").keyup(function () {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#table1").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"});
I tried:<br />
$("#table1, #table2").find("tr");<br/>
and:<br />
$("#table1", "table2").find("tr");<br />
but none of them would work!