How can I delete all rows from a table which do not have a specific text in their column?
This does not work:
$('#mytable').find('tr:not(:has(th))').filter(
function() {
return $(this).find('td').text() != $("#some_component").val();
}).remove();
}
UPDATE
The answers posted do not work for me. Either they remove all rows (I need to check for the text in a specific row not the first one-or any row for that matter) or they do nothing.
The following which is a modification of my first attempt works though
$('#mytable').find('tr:not(:has(th))').filter(
function() {
return ($(this).find('td').text().indexOf($("#some_component").val()) < 0);
}
).remove();
HTML:
<table id="myTable">
<tr>
<td>Example One</td>
<td>Example Two</td>
<td>Example Three</td>
</tr>
<tr>
<td>Test One</td>
<td>Test Two</td>
<td>Test Three</td>
</tr>
<tr>
<td>Trial One</td>
<td>Trial Two</td>
<td>Trial Three</td>
</tr>
</table>
JavaScript jQuery (if it does contain):
$(document).ready( function() {
$('#myTable td:contains("Test")').parents("tr").remove();
});
JavaScript jQuery (if it does not contain):
$(document).ready( function() {
$('#myTable td').not(':contains("Test")').parents("tr").remove();
});
JSFiddle: http://jsfiddle.net/22QKM/
Out of interest, the code you posted does work, as far as I can tell. Here is a jsfiddle:
$(document).ready(function() {
$("#btn").click(function () {
console.log($("#some_component").val());
$('#mytable').find('tr:not(:has(th))').filter(
function() {
return $(this).find('td').text() != $("#some_component").val();
}).remove();
})
});
http://jsfiddle.net/EaNEd/
You can do this using below code.
$("td:not(contains("+$("#some_component").val()+")"))
.siblings()
.filter(":not(contains("+$("#some_component").val()+"))")
.parent('tr')
.remove();
Tested Code
$('tr').filter(function()
{
return $(this).find('td:contains("'+ $("#some_component").val() +'")').parent().css('background-color','red');
});
Test it and then replace .css() with .remove()
DEMO
Delete all rows from a table that does not having a specific text string:
function RemoveFromTable(tblID, VALUE){
$("#"+tblID).find(":not(:contains('"+VALUE+"'))").hide();
}
Note:You can also use "remove()" method instead of "hide()" method"
Call the function as follows:
RemoveFromTable('table ID','value')
Related
I'm about to edit an addon and I have a problem with the jquery list, that filters and hides some elements of a table/html.
$(document).ready(function(){
$('tr').find('td:contains("1,0")').closest('tr').hide();
$('tr').find('td:contains("1.0")').closest('tr').hide();
});
Thats the way I'm using it right now. The function is that I dont want to see the rows with "1,0" and "1.0" anywhere in the row. There can be anything around the "1,0" or "1.0". Like "cars 1,0" or "paper 1.0".
The problem I have is, that this code also hides rows like "paper 11.00" and "cars 1,020". Anyrow that contains "1.0" "1,0" in any form.
Can anyone please help me to adjust the "filter", to avoid hiding "11.00" or "1,020"?
Use .filter() and td.text().match with regex \b1[.,]0\b to match 1.0 and 1,0
$(document).ready(function() {
$('td')
.filter(function() {
return $(this).text().match(/\b1[.,]0\b/)
})
.closest('tr')
.hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1.0</td>
</tr>
<tr>
<td>1,0</td>
</tr>
<tr>
<td>1.01</td>
</tr>
<tr>
<td>11.0</td>
</tr>
<tr>
<td>var 1.0 bar</td>
</tr>
<tr>
<td>var 1,0 bar</td>
</tr>
<tr>
<td>1 . 0</td>
</tr>
</table>
The solution using JQuery $.each() and RegExp.prototype.test() functions:
$(document).ready(function(){
$('tr td').each(function(i, el){
if (/\b(1\.0|1,0)\b/g.test($(el).text())) {
$(el).closest('tr').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr><td>11.0</td></tr>
<tr><td>cars 1,020</td></tr>
<tr><td>1.0</td></tr>
<tr><td>cars 1,0</td></tr>
</table>
I got this code:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('td').click(function() {
if($('#edit').length == 0) {
var idz = $(this).parent().attr('id');
var textz = $(this).text();
var rowz = $(this).attr('id');
$(this).append('<textarea id=\"edit\" style=\"position:absolute;left:0;top:0;z-index:1;\">'+textz+'</textarea>').focus();
}
});
if($('#edit').length > 0) {
$('html:not(#edit)').click(function() {
$('#edit').remove();
});
}
});
</script>
<div class="table">
<table>
<tr>
<td>ID</td>
<td>Client</td>
<td>Category</td>
<td>Active</td>
</tr>
<tr id="2">
<td>2</td>
<td>Client 2</td>
<td>1</td>
<td>1</td>
</tr>
<tr id="1">
<td>1</td>
<td>Client 1</td>
<td>2</td>
<td>1</td>
</tr>
</table></div>
What I'm trying to do here is to intercept a click on any table cell and open a small textarea with the cell's value. IT WORKS OKAY.
But the peoblem is I'm trying to close the textarea by clicking elsewhere but not the #edit. So, this part of code doesn't work:
if($('#edit').length > 0) {
$('html:not(#edit)').click(function() {
$('#edit').remove();
});
}
I tried various ways of if/else statements, one if in another and so on and it still doesn't work. Please give me a hint of what's wrong with me.
The #edit element doesn't exist on first pageload, so the event handler is never bound as the condition fails.
Also, html:not(#edit) is usually not the way to go, attach the event handler to the document and check if the click originated from within #edit, if not remove #edit.
Change this
if($('#edit').length > 0) {
$('html:not(#edit)').click(function() {
$('#edit').remove();
});
}
to
$(document).on('mousedown', function(e) {
if ( ! $(e.target).closest('#edit').length )
$('#edit').remove();
});
FIDDLE
I need to get all the rows first td in to an javascript array and a do a check of if element exist in array print something.
can i please know how this can be done with jquery or javascript ?
I have created a fiddler here. http://jsfiddle.net/RXD2u/1/
<table id="tbl_dynamic_call_dates" border="1">
<tr>
<td>07/10/2013</td>
<td>Cell B</td>
</tr>
<tr>
<td>08/10/2013</td>
<td>Cell B</td>
</tr>
<tr>
<td>09/10/2013</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
EDIT 1 I should ommit the first row and get all others. i tried an asnwer as given below but it doesnt ommit the first row.
var arr = $('#tbl_dynamic_call_dates tr td:first-child').map(function () {
return $.trim($(this).text())
}).get();
Try
var arr = $('#tbl_dynamic_call_dates tr:gt(0) td:first-child').map(function () {
return $.trim($(this).text())
}).get();
console.log(arr)
then use $.inArray() to test
like
var exists = ( $.inArray('08/10/2013', arr) != -1 );
Demo: Fiddle
Try -
$("table tr :first-child")
Using JQuery, this should work
$("tr td:first-child")
this will get you your first td's, then you can do whatever you want with them
Use below code of jQuery:
$(document).ready(function(){
$("table tr").each(function(index,value){
var val = $(this).find("td:first").text();
alert(val);
});
});
also include the jQuery library.
Try this.
$("table tr td:first-child").each(function(index,value){
var val = $(this).text();
alert(val);
});
DEMO
I have a question, I am trying to make some manipulation with html tables. I have two tables,
and when I hover first row from the first table, it should highlight both rows from both tables.
I have found a solution, in making this simple function:
<script type="text/javascript">
function matchrow(){
document.getElementById('row1').style.backgroundColor='#f5f5f5';
}
function unmatchrow(){
document.getElementById('row1').style.backgroundColor='white';
}
</script>
On the first table I have:
<tr onmouseover="matchrow()" onmouseout="dismatchrow()" >
on the second table I have:
<tr id="row1" >
So when I put mouseover the first row from the first table, the first row from the second table highlights.
My question is, how to make it for the every single row, especially if it will be dynamic table.
Hope I was clear.
I've implemented this with jQuery. It doesn't use obtrusive JS and doesn't require additional IDs for rows.
Also, CSS classes are more preferable than inline styles.
HTML:
<table id="t1">
<tr><td>......</td></tr>
<tr><td>......</td></tr>
</table>
<br/>
<table id="t2">
<tr><td>......</td></tr>
<tr><td>......</td></tr>
</table>
CSS:
tr.active > td
{
background-color:#f00;
}
JS:
$(function(){
$("#t1 tr").hover(
function(){
$(this).addClass('active');
$('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').addClass('active');
},
function(){
$(this).removeClass('active');
$('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').removeClass('active');
}
);
});
Here is live fiddle: http://jsfiddle.net/keaukraine/KBEhA/1/
You can use the div id as a parameter in the function
<tr onmouseover="matchrow('row1')" onmouseout="dismatchrow('row1')">
function matchrow(divid){
document.getElementById(divid).style.backgroundcolor='#F5F5F5';
}
function dismatchrow(divid){
document.getElementById(divid).style.backgroundcolor='white';
}
You can use jQuery for this.
Use the .eq() and .index() functions.
A way of doing it:
HTML:
<table border="1">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
<tr>
<td>Row4</td>
</tr>
</table>
<table border="1">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
</table>
JS:
$('table tr').hover(function()
{
var index = $(this).index();
$('table').each(function()
{
$(this).find('tr').eq(index).css('color', 'red');
});
});
A working example can be found here.
How do I get the index of the <tr> in the table but only if it has <td>s and not <th>s
If I use a click event below it will alert the index of the with td and th but I only want <tr> with <td>s
thanks
$('td').click(function(){
var s = $(this).parents('table tr:has(td)').index();////// returns
alert(s);
});
<table>
<tr>
<th><th><th><th><th><th><th><th><th><th>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
</table>
Try this...
$('td').click(function(){
if ( ! $(this).closest('table').find('th').length ) {
var s = $(this).closest('tr').index();
alert(parseInt(s) + 1);
}
});
JS FIDDLE LINK
Your given code is working properly. see this jsfiddle.