Removing rows that do not contain search-term with jQuery - javascript

I'm using the following JQuery to filter rows on a datatable, which works fine...
yuiDtFilter = function(tableDivId, filter) {
//custom jQuery function defines case-insensitive fn:Contains, use default fn:contains for case-sensitive search
jQuery.expr[':'].Contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$("#" + tableDivId + " .yui-dt-data").find('tr').hide();
$("#" + tableDivId + " .yui-dt-data").find('td:Contains("' + filter + '")').parents('tr').show();
}
However I have a need for the filter work in the opposite way. I need it to remove rows that don't match the search terms.
I've found out that I need to use 'not()', but I've spent most of the day in vain trying to get it to work (using every example I can find).
I've tried many variations of -
$("#" + tableDivId + " .yui-dt-data")
.find(:not(('td:Contains("' + filter + '")'))
.parents('tr').remove();
Could anyone give me a hand using my code as a starting point?

Try
$("#" + tableDivId + " .yui-dt-data").find('td').not(':contains("' + filter + '")').parents('tr').remove();
or
$("#" + tableDivId + " .yui-dt-data").find( 'td:not(:contains("' + filter + '"))' ).parents('tr').remove()

Remove row from HTML table that doesn't contains specific text or string using jquery.
Note: If there are only two column in HTML table, we can use "last-child" attribute to find.
*$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
var lastTD = $(this).find("td:last-child");
var lastTdText = lastTD.text().trim();
if(!lastTdText.includes("DrivePilot")){
$(this).remove();
}
});
});
Note: If there are more than two column in HTML table, we can use "nth-child(2)" attribute to find.
Passing column index with "nth-child(column index)"
$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
var lastTD = $(this).find("td:nth-child(2)");
var lastTdText = lastTD.text().trim();
if(!lastTdText.includes("DrivePilot")){
$(this).remove();
}
});
});
Note: "DrivePilot" is nothing but text or string

Related

querySelectorAll with two or more dataset as queries

I have a table i created lets call it RPT_ACCOUNTS
CODE|DESCRIPTION|TYPE
01|BANK|BA
02|TAX|TA
When I pull the information from the datatable i create the table visually in html
row.dataset.rpt_accounts_code= DBRow.CODE;
row.dataset.rpt_accounts_description= DBRow.DESCRIPTION;
row.dataset.rpt_accounts_type= DBRow.TYPE;
So now I have the 3 datasets.
now I want to filter so i can run through a for loop. (this is my problem)
if i use
var ROWS= RPT_ACCOUNTS.querySelectorAll('tr[data-rpt_accounts_code="' + searchvalue + '"]');
IT WORKS!
But now i need two search values
so i read up and saw it is supported with a "," but it doesn't work. i have tried many combinations
var ROWS= RPT_ACCOUNTS.querySelectorAll('tr[data-rpt_accounts_code="' + searchvalue + '"],tr[data-rpt_accounts_type="' + searchvalue2 + '"]');
var ROWS= RPT_ACCOUNTS.querySelectorAll('tr[data-rpt_accounts_code="' + searchvalue + '"],[data-rpt_accounts_type="' + searchvalue2 + '"]');
var ROWS= RPT_ACCOUNTS.querySelectorAll('tr[data-rpt_accounts_code="' + searchvalue + '"]','tr[data-rpt_accounts_type="' + searchvalue2 + '"]');
anyone one of the above methods go through, but it pulls all the data not just the line I'm looking for.
Any help would be awesome.
jsfiddle
https://jsfiddle.net/custardcs/q8a6uysg/5/
If you want to query multiple attributes, express them like el[propA=val][propB=val], so, in your case
var ROWS= RPT_ACCOUNTS.querySelectorAll('tr[data-rpt_accounts_code="' + searchvalue + '"][data-rpt_accounts_type="' + searchvalue2 + '"]')

hyperlink alternate text replacement

At the moment i've got this code, which replaces a span class whith a hyperlink. The hyperlink includes a abbreviation and the alternate texxt for the hyperlink includes the same abbreviation. Now what i want to do is, to somehow replace the second abbreviation in the alternate text of the hyperlink. So that there isn't "click here to visit + 'name of'abbreviation" but instead an alias. So if the abbreviaton is ggl, the alias should be google. But the hyperlink shouldn't use this alias. Can sb help me? thx
(function($) {
var number = "1234567";
function linkBuilder(abbreviation) {
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation + "</a>";
}
function linkBuilder2(abbreviation2) {
return "<a href='https://www.test.com/" + abbreviation2 + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation2 + "</a>";
}
jQuery(document).ready(function() {
var fl = $(".first-link");
if (fl.length > 0) {
fl.html(linkBuilder(fl.data("abbreviation")));
}
var sl = $(".second-link");
if (sl.length > 0) {
sl.html(linkBuilder2(sl.data("abbreviation2")));
}
});
})(jQuery);
Here is a working jsfiddle:
https://jsfiddle.net/e7qdx031/1/
linkBuilder() should be re-usable, as kalsowerus mentioned.
Another thing that should be mentioned is that the following code returns a collection of elements, not just a single element.
var fl = $(".first-link");
...
var sl = $(".second-link");
The code you have provided will not function properly if there are multiple .first-link classes on the page. So instead I would iterate over each element using $.each() and run the linkBuilder() function on them individually.
As for the linkBuilder function I would modify it to accept the element object, then read the properties to retrieve alias and name. Full name is something that you seemed to indicate you need, but was not present in the code.
(function($) {
var number = "123456";
function linkBuilder($obj) {
var abbreviation = $obj.data('abbreviation');
var name = $obj.data('name');
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + name + "</a>";
}
jQuery(document).ready(function() {
$('.first-link, .second-link').each(function(index, obj){
$(obj).html(linkBuilder($(obj)));
});
});
})(jQuery);
What you probably want is something like this:
function linkBuilder(abbreviation, alias) {
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + alias + "</a>";
}
Just pass the display-name you want for your link as the second argument.

How to find the Div elements along with the input elements through jquery selector string

The queryString to find all the input elements with ID ends with '-0', '-1' etc ..
the below code works fine
var queryString = ':input:focusable[id$="-' + index + '"]';
I also want to find the div elements ending with the same scenario .. How i can change the query ??
You can use comma to add additional selectors:
var queryString = ':input:focusable[id$="-' + index + '"],div[id$="-' + index + '"]';
make it
var queryString = ':input:focusable[id$="-' + index + '"], div[id$="-' + index + '"]';
Using comma , you can add selectors to the same query string.
Edit
but the select element am having present inside the div element and
the div element has the ID
try this
var queryString = 'div[id$="-' + index + '"]:input:focusable';

Jquery out put values issue

I'm having some issues with jquery.
I have a variable amount of libox's that have specific values in them.
I want to grab the data and on clikc out put it to a text area. but I'm having some problems with it.
here is my code:
$(".bottomtri.single_add_to_cart_button").click(function() {
var slival = $("#mixers li .infora h3").text(),
slivalmix = $("#mixers li .mix-value").text(),
slivalimg = $("#mixers li .color-img").html(),
slivaltotal = slivalimg + slival + slivalmix;
$(".addon.addon-custom-textarea").val(slivaltotal);
});
with this snippet might out put is just mashing everything together and its also adding up the numbers.
What I want it to do is go through each one and out put it like a list.
so it would have an out put like
h3 mix-value color-img
h3 mix-value color-img
h3 mix-value color-img
h3 mix-value color-img
You need to loop over the slide elements, and build up an array of strings. Then after the loop you can join the items in the array, and separate them with line breaks. You also need to add seperaters when you concatenate the values.
$(".bottomtri.single_add_to_cart_button").click(function() {
var sliStrings = [];
$("#mixers li").each(function () {
var slival = $(".infora h3", this).text(),
slivalmix = $(".mix-value", this).text(),
slivalimg = $(".color-img", this).html(),
sliStrings.push(slivalimg + " " + slival + " " + slivalmix);
});
$(".addon.addon-custom-textarea").val(sliStrings.join('\n'));
});
You want spaces between the values, and you want numbers to be treated like text, then you have to put spaces in the output, this will also avoid numbers being added together
slivaltotal = slivalimg + " " + slival + " " + slivalmix

js/jquery iterate through html elements to dynamically build a string

I'd like to build a string based on values defined in an html form only if they have been populated. I've successfully parsed the form fields and dropdown with a for loop ($.each()) but my ultimate goal is to dynamically build a string with the results. The string is being used to create a REST query, this is currently the only way to search based on our technologies. Does anyone have a recommended solution?
thx in advance
sample html element:
<input data-param=" prefix like '%" data-name="prefix" class="prefix uno" type="text" placeholder="pre">
working btn click event loop to capture filled in form fields:
var children = $(this).parent().children('.uno');
$.each(children, function(i, val){
if($(val).val() !== ''){
console.log($(val).data('name') + " "+ $(val).data('param') + " " + $(val).val());
}
});
goal:
var newString = field1.param + field1.val + '% ' + field2.param + field2.val + '% ';
translated:
var newString = prefix like '%01%' and name like '%tree%';
Thanks David Fregoli for the jquery serialize reference, that was close, but the solution ended up being to place the strings into a single array, change it toString(), and remove the ',' from the new string.
code:
var samp = [],
thisVal = $(this).parent().children('.uno');
$.each(thisVal, function(i, val){
if($(val).val() !== ''){
samp.push(
$(val).data('param'),
$(val).val(),
$(val).data('close')
);
}
});
itQuery.where = samp.toString().replace( /,/g , '');
result search string:
"number like '%08%' and field = 34"

Categories