I try to show all lines contaning selected text from option after click on button, this is my code:
<select>
<option>text1</option>
<option>text2</option>
<option>text3</option>
<option>text4</option>
</select>
<button class="show"></button>
<button class="hide"></button>
<table>
<tr>
<td>text1</td><td>....</td>
</tr>
<tr>
<td>text2</td><td>....</td>
</tr>
<tr>
<td>text3</td><td>....</td>
</tr>
<tr>
<td>text1</td><td>....</td>
</tr>
</table>
I try to do something like this but it doesnt work:
$(function(){
b = $("tr");
$(".show").on("click", function(){
var a = $("select option:selected").text();
$(b).hide();
if ($("tr:contains('"+a+"')").length)
$(this).closest(tr).show();
});
$(".hide").on("click", function(){
$(b).show();
});
});
Can someone help me, pls :)
You need something like this. Don't pollute global space and use proper selectors. And there is no need to wrap a jQuery object again.
$(function() {
var b = $("table");
$(".show").on("click", function() {
var a = $("select option:selected").text();
b.find("tr").hide().end().find("td:contains('" + a + "')").parent().show();
});
$(".hide").on("click", function() {
b.find("tr").show();
});
});
Try this : You can use each to check each tr for selected option text and make it visible. No need to use closest('tr') as $(this) itself is a TR.
$(function(){
b = $("tr");
$(".show").on("click", function(){
var a = $("select option:selected").text();
b.hide();
//if ($("tr:contains('"+a+"')").length)
// $(this).closest(tr).show();
b.each(function(){
if($(this).text().indexOf(a)!=-1)
{
$(this).show();
}
});
});
$(".hide").on("click", function(){
b.show();
});
});
You can't use contains cause match any element that simple contains test(Select all elements that contain the specified text). Bu you can use each and match any td with same text and show parent(tr) like:
b = $("tr");
$(".show").on("click", function() {
var a = $("select option:selected").text();
$(b).hide();
$("td").each(function() {
if ($(this).text() == a) {
$(this).parents("tr").show();
}
});
});
$(".hide").on("click", function() {
$(b).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>text1</option>
<option>text2</option>
<option>text3</option>
<option>text4</option>
</select>
<button class="show">show</button>
<button class="hide">hide</button>
<table>
<tr>
<td>text1</td>
<td>....</td>
</tr>
<tr>
<td>text2</td>
<td>....</td>
</tr>
<tr>
<td>text3</td>
<td>....</td>
</tr>
<tr>
<td>text1</td>
<td>....</td>
</tr>
</table>
Make your buttons run functions directly here.
function show() {
var needle = $("select option:selected").text();
$('#myTable td').each(function() {
if ($(this).text() === needle) $(this).show();
});
}
function hide() {
var needle = $("select option:selected").text();
$('#myTable td').each(function() {
if ($(this).text() === needle) $(this).hide();
});
}
Take a look at this (jsFiddle).
Related
So I have a table and I need to find the td which has the exact number inside it (number '2'). The problem is the td numbers are lists like 1,2,3,4.
Now if I do this, it finds the td with '2' inside:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
$(function(){
var search = '2';
$("table tr td").filter(function() {
return $(this).text() == search;
}).css('color','red');
});
But if I do this, it doesn't work with lists:
<table>
<tr>
<td>1,14</td>
<td>3,10</td>
<td>2,5</td>
<td>22,7</td>
</tr>
</table>
$(function(){
var search = '2';
$("table tr td").filter(function() {
return $(this).text() == search;
}).css('color','red');
});
What I want it to do is change all the numbers in that td 'red', for example
2,5'.
You could split by comma and check with includes.
$(function(){
var search = '2';
$("table tr td").filter(function() {
return $(this).text().split(',').includes(search);
}).css('color','red');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1,14</td>
<td>3,10</td>
<td>2,5</td>
<td>22,7</td>
</tr>
</table>
In your code, you are only searching for 2 but 2,5 is not a 2. But 2 is part of 2,5.
My approach is simple I will split each node text with a , then I ll find whether 2 is present of not in that array
$(function(){
var search = '2';
$("table tr td").filter(function(x) {
var t = $(this).text();
var tArr = t.split(",")
return tArr.indexOf(search) !== -1;
}).css('color','red');
});
https://jsfiddle.net/2on938m1/
Try with includes.
$(function(){
var search = '2,5';
$("table tr td").filter(function() {
return $(this).text().includes(search)
}).css('color','red');
});
for example
https://repl.it/repls/HandsomeLumberingEmulation
I created a manual search functionality that displays the results as the user types. Here is the fiddle: https://jsfiddle.net/rtq4jfuq/1/
Here is the HTML
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<input style='width: 300px;' placeholder='search' id='search'>
<table border='1'>
<tr>
<th>Name</th>
</tr>
<tr class='names'>
<td>Bob</td>
</tr>
<tr class='names'>
<td>Ted</td>
</tr>
<tr class='names'>
<td>Steve</td>
</tr>
<tr class='names'>
<td>Sven</td>
</tr>
<tr class='names'>
<td>Magnus</td>
</tr>
</table>
Here is the script
$(document).ready(function() {
$("#search").keyup(function(){
var query = $(this).val();
$(".names").each(function(){
var n = $(this).children("td").html();
if (n.toUpperCase().includes(query.toUpperCase())) {
$(this).css("display", "");
}
else {
$(this).css("display", "none");
}
});
});
});
I want to display a message once there are no rows displayed but how do I check if there are no rows displayed?
Use the :visible filter so see if you've hidden all results:
$(document).ready(function() {
$("#search").keyup(function() {
var query = $(this).val();
$(".names").each(function() {
var n = $(this).children("td").html();
if (n.toUpperCase().includes(query.toUpperCase())) {
$(this).css("display", "");
} else {
$(this).css("display", "none");
// Check to see if all elements have been hidden
if (!$(".names:visible").length) {
// All element hidden, do something here
alert("no results");
}
}
});
});
});
EDIT
FYI - your code can be greatly simplified. This is a quick and dirty example - I'm sure that there's room for further improvement:
$(document).ready(function() {
$("#search").keyup(function() {
var query = $(this).val();
var matches = $(".names").filter(function() {
return $(this).children("td").html().toUpperCase().includes(query.toUpperCase())
}).show();
$(".names").not($(matches)).hide();
if (!$(".names:visible").length) {
$("#myTable").append("<tr class='noRecords'><td>No records found</td></tr>");
} else {
$(".noRecords").remove();
}
});
});
Here's a working fiddle.
I will suggest you that instead of adding/removing an inline CSS add/remove a class with display none, so you can find how much elements has that class and compare it againist of how much cells you have, if number matches you will know that is not displaying any cell
In the table the first column is editable and after edit it/change it I want to show the alert as Changed. I am calling the check function after 5000ms.
Adding Code Snippet for My code
Something I missed or wrong somewhere. Please Help.
Here is the Code.
var table = $("table tbody");
table.find('tr').each(function (i) {
var $tds = $(this).find('td'),
id = $tds.eq(0).text(),
product = $tds.eq(1).text();
$check = function() {
if(($tds.eq(0).text() != id) && ($tds.eq(1).text() != product)){
alert("Changed");
}
else{
alert("Not changed");
}
}
setInterval(function() { $check(); }, 5000);
alert(id + ":" + product);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td contentEditable>63</td>
<td>Computer</td>
</tr>
</tbody>
</table>
if(($tds.eq(0).text() != id) && ($tds.eq(1).text() != product)){
This only triggers when both fields changed, change it to a "||"
Also check out this: https://developer.mozilla.org/en-US/docs/Web/Events/input for capturing contenteditable changes.
I am having trouble deleting the row off the table using the button.
Live: http://jsfiddle.net/Z7fG7/21/
HTML:
<select class="combobox form-control">
<option value="" selected="selected">Choose a Person</option>
<option>Bob</option>
<option>Kyle</option>
</select>
<br>
<!-- Table -->
<table class="table">
<thead>
<div class="container">
<tr>
<th>First Last Name</th>
</tr>
</div>
</thead>
</table>
JS/Jquery:
$('.combobox').change(function(e) {
var selectedVal = $(this).val();
$('.table').append('<tr><td>' + selectedVal + '</td><td><img class="delete" src="images/delete.png" width="25" height="25"/></td></tr>');
});
$('table td img.delete').click(function(){
$(this).parent().parent().remove();
});
I am using Bootstrap. Any help would be great!
Have a look into delegated events http://learn.jquery.com/events/event-delegation/
Demo: http://jsfiddle.net/robschmuecker/Z7fG7/20/
var i = 1;
$("#addbutton").click(function () {
$("table tr:first").clone().find("input").each(function () {
$(this).val('').attr({
'id': function (_, id) {
return id + i
},
'name': function (_, name) {
return name + i
},
'value': ''
});
}).end().appendTo("table");
i++;
});
$(document).on('click', 'button.removebutton', function () {
alert("aa");
$(this).closest('tr').remove();
return false;
});
The click handler for the delete image has to be added to every new row in the table.
$('.combobox').change(function(e) {
var selectedVal = $(this).val();
$('.table').append('<tr><td>' + selectedVal + '</td><td><img class="delete" src="images/delete.png" width="25" height="25"/></td></tr>');
$('table td img.delete').click(function(){
$(this).parent().parent().remove();
});
});
Or, in addition to above, when you use .clone by default it remove all events. A cleaner answer using your existing code:
EDIT: Forgot to explain! Using .clone(true) keeps the events. Your .on function is working correctly without needing to reapply it on each new row too.
var i = 1;
$("#addbutton").click(function() {
$("table tr:first").clone(true).find("input").each(function() {
$(this).val('').attr({
'id': function(_, id) {return id + i },
'name': function(_, name) { return name + i },
'value': ''
});
}).end().appendTo("table");
i++;
});
$('button.removebutton').on('click', function() {
alert("aa");
$(this).closest( 'tr').remove();
return false;
});
If i have a table:
<table id="myTable">
<tr>
<td>1</td><td>2</td><td>NoMatch</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>Match</td><td>4</td>
</tr>
</table>
I have been trying:
$(document).ready(function () {
$('input#myInput').keyup(function (val) {
// for each third td of each row, if this value does not contain: this.val() then hide it
});
});
Something like this:
var $cells = $('#myTable tr td:nth-child(3)'),
$hidden = $();
$('#myInput').keyup(function () {
var search = this.value;
var $to_hide = $cells.filter(function() {
return $(this).text() !== search;
}).parent();
$hidden.not($to_hide.get()).show();
$hidden = $to_hide.hide();
});
I assumed that when you say contains, you mean that the text has to be equal to the provided input (otherwise NoMatch and Match would not make sense). But if the content of cell just has to contain the search string as substring, you can use .indexOf() [docs].
DEMO
There are other things you have to consider, like what should happen when the search string is empty, but this is for you to play around ;)
Use "this" in your key up event handler to get the value of the input.
$(document).ready(function () {
$('input#myInput').keyup(function () {
//add if statement
alert($(this).val());
});
});
Not quite sure what you are trying to do with the table. There is not enough information.
Try this:
jsfiddle
HTML
<table id="myTable">
<tr>
<td>1</td><td>2</td><td>NoMatch</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>Match</td><td>4</td>
</tr>
</table>
<input id="myInput"/>
Javascript/Jquery
$('#myInput').keyup(function () {
var me = $(this);
var val = me.val();
$("#myTable tr").each(function() {
var tr = $(this);
var td = tr.find("td:eq(2)");
if(td.text().substring(0, val.length) === val) {
tr.show();
} else {
tr.hide();
}
});
});