I would like to use jQuery to select all rows in a table that don't have a td containing certain text.
I can select the rows with this line:
var x = $('td:contains("text"):parent'); //muliple td's in each tr
How would I use the :not selector to invert the selection?
edit: I don't think the line of code above is really accurate. This is how I originally had the line:
var x = $('td:contains("text")).parent(); //muliple td's in each tr
When I tried to invert the selection, I get all the rows as they all happen to contain a td not containing the text.
Try this:
var $x = $('td:not(:contains("text")):parent');
FIDDLE DEMO
Case 1: Select all TR that contains text 'my text' in all TD's
I wouldn't rely too much on the pseudo. Try something like below using filters, (internally pseudo are going to do the same anyway)
$('tr').filter(function () {
return $(this).find('td').filter(function () {
return $(this).text().indexOf('myText') == -1;
}).length;
}); //would return all tr without text 'myText'
DEMO: http://jsfiddle.net/dWuzA/
Case 2: Select all TR that contains text 'my text' in any TD's
#squint made an excellent point in comment
So incase if you want to select all TR that contains doesn't has a specific text in any of the TD's, then you can inverse the conditions.. See below,
DEMO: http://jsfiddle.net/dWuzA/1/
$(function () {
$('tr').filter(function () {
return !$(this).find('td').filter(function () {
return $(this).text().indexOf('22') != -1;
}).length;
}).addClass('highlight');
});
Related
I have a question !
I'm trying to create a filter in a table with mark.js, where found words are highlighted and non-highlighted content is hidden, so far so good
this is the code:
$(function() {
var $input = $("input[name='test']")
$context = $("table tbody tr");
$input.on("input", function() {
var term = $("#test").val();
$context.show().unmark();
if (term) {
$context.mark(term, {
done: function() {
$context.not(":has(mark)").hide();
}
});
}
});
});
the problem arises when I want to search for more words on the same line, the code will find the matches searched for type OR, while I would like to filter the search type AND and exclude all the other lines that do not have the double match.
How could I solve in your opinion?
this is what I need: jsfiddle.net/julmot/buh9h2r8/
adapting it to the code above, also because I would like to create a checkbox that allows me to search both type OR and type AND!
Thanks for your help
I have added this code to my function in javascript and am successfully updating the tables first TD with the new values of the rows after the user clicks a button to push the row up or down, the issue is I am using a input field in this td and the input is removed and the value is now just a simple text/numeric character.
How can I change this snippet to update the input field within the first td as opposed to replacing the td content with the new values outside a input field.
Array.prototype.forEach.call(document.querySelectorAll('td:first-child'),
function (elem, idx) { elem.innerHTML = idx + 1; }
)
Ok so with Archers help I have updated the code below and now have the functionality I am wanting. Thanks for all who participated in schooling this newbie ;)
Array.prototype.forEach.call(document.querySelectorAll('td:first-child input[name^=sort]'), function (elem, idx) {
elem.value = idx + 1;
By changing
'td:first-child'
to
'td:first-child input[name^=sort]'
I was able to reference the specific input field as opposed to all input fields in the first td column and no longer am replacing the input fields with plain text.
You can change the selector to target the input instead of the cell that it's in...
Array.prototype.forEach.call(document.querySelectorAll('td:first-child input'),
function (elem, idx) {
elem.value = idx + 1;
});
Or you can use your code and change its body like this:
Array.prototype.forEach.call(document.querySelectorAll('td:first-child'), function(elem, idx){
(elem.querySelector("input")||{}).value=idx+1; //use this line instead of your forEach body
});
Try it online!
I have a table that I loop with JQuery in order to find rows that match certain conditions:
$('#sometable').find('tr').each(function () {
var row = $(this); //<----
if(row.find('input[type="checkbox"]').is(':checked')) {
//etc
}
}
My question is, is there a way to remove each matched row? I mean is there a way to collect these row variables inside my if(row.find('input[type="checkbox"]').is(':checked')) so that I can remove the specific rows from my table directly?
Note that my rows don't have a unique id
You may want:
$('#proposedtable tr:contains(input:checkbox:checked)').remove();
or
$('#proposedtable input:checkbox:checked').closest('tr').remove();
Try this:
var filteredRows = $('#sometable').find('tr').filter(function(){
return $(this).find('input[type="checkbox"]').is(':checked'));
});
$(filteredRows).remove();
The above function will gather all the rows(tr) and then filter those rows based on the checked state of checkbox. Later the filtered rows will be removed.
To make it as array, use Array.prototype.slice.call()
var arrFilteredRows = Array.prototype.slice.call(filteredRows);
Is this help you ?
http://jsfiddle.net/LGdA3/
<pre><code>
$('input#myButton').on('click', function(){
$('table#someTable td input[type="checkbox"]:checked').each(function(){
$(this).parents('tr').first().remove();
});
});
</code></pre>
I use the following jquery function for highlight the row ( using bg color ) in Html table.It was working fine.my question is how to select the second row from the table.'highlight' is a class
.highlight td {
background: #E7EFFA;
}
$('#Tabnameabcd tr').mouseover(function() {
if ($.trim($(this).text()) != '')
$(this).addClass('highlight');
}).mouseout(function() {
$(this).removeClass('highlight');
});
which means:
name age depart
test 12 test
test1 13 tested
here name,age,depart as a first row.that is title.
next test,test1 are elements of the tabe.if i use that jquery function the title( name,age,depart ) are apply.i need to apply that jquery function only to the elements of the table not a title?how to do this?
To get second row: $('#Tabnameabcd tr').eq(1) or $('#Tabnameabcd tr:eq(1)').
To get all rows from second one (Demo: http://jsfiddle.net/pXj5F/):
$('#Tabnameabcd :nth-child(n+2)')
Also you should think about thead and tbody...
Try like this
$('#mytable_id tr').eq(1).(your function here);
and you want to apply for the rows not the tiltes then you can also use
$("#mytable_id td").function({
//Play here
});
it will applicable to all the td's of your table excluding titles.you can also use ".not()" function instaed of this
I have a 5×7 HTML table. On many queries, there are fewer than 35 items filling the complete table.
How can I "hide" the empty cells dynamically in this case, using jQuery (or any other efficient way)?
Edit - Improved Version
// Grab every row in your table
$('table#yourTable tr').each(function(){
if($(this).children('td:empty').length === $(this).children('td').length){
$(this).remove(); // or $(this).hide();
}
});
Not tested but seems logically sound.
// Grab every row in your table
$('table#yourTable tr').each(function(){
var isEmpty = true;
// Process every column
$(this).children('td').each(function(){
// If data is present inside of a given column let the row know
if($.trim($(this).html()) !== '') {
isEmpty = false;
// We stop after proving that at least one column in a row has data
return false;
}
});
// If the whole row is empty remove it from the dom
if(isEmpty) $(this).remove();
});
Obviously you'll want to adjust the selector to fit your specific needs:
$('td').each(function(){
if ($(this).html() == '') {
$(this).hide();
}
});
$('td:empty').hide();
How about CSS empty-cells
table {
empty-cells: hide;
}
I'm voting for Ballsacian's answer. For some reason,
$('table#myTable tr:not(:has(td:not(:empty)))').hide();
has a bug. If you remove the outermost :not(), it does what you'd expect, but the full expression above crashes jQuery.