I want to remove the row where the text is not found, when checkbox unchecked . If checkbox checked, then the table needs to return to its original state . What can you recommend?
function keySearch() {
$('#search').keyup(function (e) {
var search = $(this).val();
$('td').removeClass('found');
$('td').each(function (index, element) {
if ($(element).html() == search) {
$(element).addClass('found');
}
if (!$('#checkbox').prop('checked', true)) {
$(element).parent().hide();
}
else
{
$(element).parent().show();//how replace remove row?
}
});
});
}
Instead of using JavaScript to show and hide the rows, you could use it to add or remove a .checked CSS class on the parent table. Then set up the .found class so that it only hides the rows if the .checked class is present. You'll need to add the .found class to the rows instead of the cells for this to work. Just add .parent() before .addClass('found') in your code. Also, get rid of the code below your first if statement.
Here's what the CSS would look like:
table.checked > * > tr.found {
display: none;
}
Some additional code will be needed to make the checkbox work. Here's how to do it with plain ol' JavaScript (sorry, I don't use jQuery much):
document.querySelector('#checkbox').addEventListener('click', function(e) {
if(e.target.checked)
document.querySelector('#table').classList.add('checked');
else
document.querySelector('#table').classList.remove('checked');
});
(This assumes that your table has an id of 'table').
Related
In the following Fiddle, you can click to select rows in the table. If you click the 'Execute' button, an alert will tell you if the class .row_selected is visible or not. This is all working, now I need to elaborate on the rows selected part. The user can only 'Execute' one row at a time, so if one row is selected - yay. If more than one are selected, an error message asking to select only one row. One row to rule them all. Any ideas?
http://jsfiddle.net/BWCBX/34/
jQuery
$("button").click(function () {
if ($(".row_selected").is(":visible")) {
alert('Row(s) are selected.')
} else {
alert('No rows are selected.')
}
});
Add a condition with .length see below,
if ($(".row_selected").length > 1) { //more than one row selected
alert('Please select one row');
} else if ($(".row_selected").length) { //one row selected
alert('Row(s) are selected.')
} else { // none selected
alert('No rows are selected.')
}
Seems like the row_selected is applied to the row only on selection so you don't need :visible check.
DEMO: http://jsfiddle.net/7wrJC/
You can use the following code to get the number of the selected rows:
if (1 === $(".row_selected:visible").length) {
// do something
}
What I am trying to achieve here is when a user clicks an element it becomes hidden, once this happens I want to prepend inside the containing element another Element to make all these items visible again.
var checkIfleft = $('#left .module'),checkIfright = $('#right .module');
if(checkIfleft.hasClass('hidden')) {
$('#left').prepend('<span class="resetLeft">Reset Left</span>');
} else if(checkIfright.hasClass('hidden')) {
right.prepend('<span class="resetRight">Reset Right</span>');
}
I tried multiple ways, and honestly I believe .length ==1 would be my best bet, because I only want one element to be prepended. I believe the above JS I have will prepend a new element each time a new item is hidden if it worked.
Other Try:
var checkIfleft = $('#left .module').hasClass('hidden'),
checkIfright = $('#right .module').hasClass('hidden');
if(checkIfleft.length== 1) {
$('#left').prepend('<span class="resetLeft">Reset Left</span>');
} else if(checkIfright.length== 1) {
right.prepend('<span class="resetRight">Reset Right</span>');
}
else if(checkIfleft.length==0){
$('.resetLeft').remove()
} else if (checkIfright.length==0){
$('.resetRight').remove()
}
Basically if one element inside the container is hidden I want a reset button to appear, if not remove that reset button...
hasClass() only works on the first item in the collection so it isn't doing what you want. It won't tell you if any item has that class.
You can do something like this instead where you count how many hidden items there are and if there are 1 or more and there isn't already a reset button, then you add the reset button. If there are no hidden items and there is a reset button, you remove it:
function checkResetButtons() {
var resetLeft = $('#left .resetLeft').length === 0;
var resetRight = $('#left .resetRight').length === 0;
var leftHidden = $('#left .module .hidden').length !== 0;
var rightHidden = $('#right .module .hidden').length !== 0;
if (leftHidden && !resetLeft) {
// make sure a button is added if needed and not already present
$('#left').prepend('<span class="resetLeft">Reset Left</span>');
} else if (!leftHidden) {
// make sure button is removed if no hidden items
// if no button exists, this just does nothing
$('#left .resetLeft').remove();
}
if (rightHidden && !resetRight) {
$('#right').prepend('<span class="resetRight">Reset Right</span>');
} else if (!rightHidden) {
$('#right .resetRight').remove();
}
}
// event handlers for the reset buttons
// uses delegated event handling so it will work even though the reset buttons
// are deleted and recreated
$("#left").on("click", ".resetLeft", function() {
$("#left .hidden").removeClass("hidden");
$("#left .resetLeft").remove();
});
$("#right").on("click", ".resetRight", function() {
$("#right .hidden").removeClass("hidden");
$("#right .resetRight").remove();
});
FYI, if we could change the HTML to use more common classes, the separate code for left and right could be combined into one piece of common code.
Add the reset button when hiding the .module, if it's not already there :
$('#left .module').on('click', function() {
$(this).addClass('hidden');
var parent = $(this).closest('#left');
if ( ! parent.find('.resetLeft') ) {
var res = $('<span />', {'class': 'resetLeft', text : 'Reset Left'});
parent.append(res);
res.one('click', function() {
$(this).closest('#left').find('.module').show();
$(this).remove();
});
}
});
repeat for right side !
I've recently experimented with using CSS to do some of this stuff and I feel that it works quite well if you're not trying to animate it. Here is a jsfiddle where I can hide a module and show the reset button in one go by adding/removing a 'hideLeft' or 'hideRight' class to the common parent of the two modules.
It works by hiding both reset button divs at first. Then it uses .hideLeft #left { display:none;} and .hideLeft #right .resetLeft { display: block; } to hide the left module and display the reset button when .hideLeft has been added to whichever element both elements descend from. I was inspired by modernizr a while back and thought it was a neat alternative way to do things. Let me know what you think, if you find it helpful, and if you have any questions :)
I'm using a jquery quick search plugin (https://github.com/riklomas/quicksearch) which filters a list based upon the data entered into an input field.
If there's no results returned, I want to display a message saying so.
The quick search plugin adds display: none to all list elements that aren't to be shown.
Therefore, I tried this:
// load jquery.quicksearch
$('#search').parent().css('display','block').end().quicksearch('#ul'+id+' li');
// show / hide message
$("input#search").keypress(function() {
li = $('.category li');
if (li.css('display') == 'none') {
$('body').append('<div id="noContent">no content</div>');
} else {
$('#noContent').remove();
}
});
The result is a very twitchy / buggy solution. Some times it doesn't append the message even if all li items have display: none. It also doesn't even remove the no content message even when there ARE list items visible.
Any ideas?
Read the docs: you don't need to do what you're doing.
Simply use the noResults option.
Their example:
$('input#search').quicksearch('table tbody tr', {
'delay': 100,
'selector': 'th',
'stripeRows': ['odd', 'even'],
'loader': 'span.loading',
'noResults': 'tr#noresults',
.......
looks like you would want 'noResults': '#noContent'
I am using this to point a seperate td's in a table. And the id(dynid) are created dynamically so i need to change the position to absolute when user hover on a td. And i tries the below one but its not wroks
$('#selectTable tr td #td'+dynid).hover(
function () {
$(this).css("position","absolute");
}
);
Thanks in advance
You are looking for an element within the td element, but you want the td element with a certain id. There is whitespace. You need td#id instead of td #id.
dynid = 2; // Test
$('#selectTable tr td#td' + dynid).hover(
function () {
$(this).css("position","absolute");
}
);
A sample with background-color
http://jsfiddle.net/FKhbd/
You may want to define a second handler, if the hover ends. Something like this:
$('#selectTable tr td#td' + dynid).hover(
function () {
$(this).css("position","absolute");
},
function () {
$(this).css("position","relative");
}
);
Probably your selector is wrong: '#selectTable tr td #td'+dynid should become '#selectTable tr td#td'+dynid. You'd also be wise to toggle on and off a css class that sets position: absolute like so:
$("#selectTable td").hover(function () {
$(this).addClass("pos-abs"); // focus
}, function () {
$(this).removeClass("pos-abs"); // blur
});
See http://api.jquery.com/hover/
I am trying to use jQuery to pick an item in a table row that will make a change within the same row
<table>
<tr id="t1"><td><input type="checkbox" id="t1" value="" /></td></tr>
<tr id="t2"><td><input type="checkbox" id="t2" value="" /></td>{want new stuff here}</tr>
</table>
In this instance - if I select the checkbox with the id of 2 - I would want a new column to be added/appended just after the last and if this same checkbox was unchecked it would remove the content just added.
Can anyone suggest how this is done?
Make sure your id values are unique on all elements, then you can use .parents("tr"):
$(".mytable tr :checkbox").click(function () {
var checked = $(this).is(":checked"),
$tr = $(this).parents("tr").first();
if (checked) {
$tr.append("<td></td>");
} else {
$tr.find("td:last").remove();
}
});
If you're adding multiple <td>'s, then store a reference to them or use an identifier to find them again. I'm assuming you just want to add/remove a column at the end.
As with anything jQuery, there are multiple solutions! This was the one off the top of my head.
I would better have dynamic content inserted into specified TD cell instead of creating and removing td container so that you would not have to take care about correct colspans.
$('#table :checkbox').change(function() {
var cont = $(this).closest('tr').find('.content');
if ($(this).is(':checked')) {
cont.append('Some content');
}
else {
cont.empty();
}
});
Check this out:
http://jsfiddle.net/sCjXg/1/
See this jsFiddle for a quick-written example
$(function(){
$("#t2").find("input").click(function(){
if($(this).is(":checked")){
$(this).parents('tr').append("<td class='t2-add'>have new stuff</td>")
}
else{
$(this).parents('tr').find('.t2-add').remove()
}
})
})
Try something like the following:
$('[type="checkbox"]').change(function () {
var $this = $(this);
if ($this.is(':checked') {
$this.closest('tr').append('<td></td>');
} else {
$this.closest('tr').children('td:last-child').remove();
}
});
This uses the jQuery .closest(selector) method.