Develop Reference

Option to check all boxes and hide table row elements

I've created a simple table where I have the option to select all checkboxes. I would like to have the option to hide individual rows, or hide all the rows when using the select all function. I've managed to get the checkboxes working, but I can't figure out why the table isn't responding to the action. I appreciate any help or insight.
The full code is in this Fiddle. Here is a glance at the jquery and javascript:
<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
</script>
<script>
function checkedAll() {
var elements = this.form.getElementsByTagName('input');
// iterate and change status
for (var i = elements.length; i--;) {
if (elements[i].type == 'checkbox') {
elements[i].checked = this.checked;
}
}
}
</script>

<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function() {
var inputValue = $(this).attr("value");
var checked = $(this)[0].checked;
$("tr").each(function() {
if($(this).find("td:eq(0)").html() === inputValue.toString()) { // this checks the first cell of each row of the table for a match
if(checked) { //instead of just toggling, you check the status and then show/hide
$(this).hide();
} else {
$(this).show();
}
}
});
});
});
</script>
<script>
function checkedAll() {
var elements = this.form.getElementsByTagName('input');
// iterate and change status
for (var i = elements.length; i--;) {
if (elements[i].type == 'checkbox') {
elements[i].checked = this.checked;
$(elements[i]).trigger("change"); // this triggers the function above
}
}
}
</script>
This should work for you. The .each loop will iterate through the rows and hide the ones where the first td is the value to be hidden.

jQuery hide box

The problem is quite simple. When I click on visible image all the boxes which were appeared should dissapear and on active field it should appear. The thing is when I click on the same field twice the box does not dissapear.
I hope my code will explain more what I want to do.
Code:
jquery:
<script type="text/javascript">
$(document).ready(function() {
var img = $('.users_table tr .user_gear').find('img');
//var dropdown = $('.users_table tr .user_gear').next('.user_arrow_box');
if((img).is(':visible') == true){
img.click(function(){
var all = $('.users_table tr .user_gear').find('.user_arrow_box');
var a = $(this).parent().find('.user_arrow_box');
a.toggle(function() {
all.removeClass('active');
a.addClass('active');
}, function() {
a.removeClass('active');
});
return false;
});
}
});
</script>

Try something like this:
img.click(function(){
var all = $('.users_table tr .user_gear').find('.user_arrow_box');
var a = $(this).parent().find('.user_arrow_box');
all.not($(a)).removeClass('active');
a.toggleClass('active');
return false;
});

Show a number of additional divs on every click

I want to have a sequential list display, where initially all the lis except the first one are hidden, and when the user clicks a button, the lis appear by groups of 3. Eventually I would like to hide the button when the list gets to the end.
The code is something like this, but it shows only one per click, every third - but I want to show also the in-between elements until the third
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
jQuery("#allevents").on('click', function(e){
e.preventDefault();
i+=3;
jQuery(".event-holder").eq(i).fadeIn();
if ( i == numbofelem ) { jQuery(this).hide(); }
});
Probably the .eq(i) is not the function I need, but couldn't find the correct one...

You can use :hidden with use of .each() loop:
jQuery("#allevents").on('click', function(e){
e.preventDefault();
jQuery(".event-holder:hidden").each(function(i){
if(i <= 2){
jQuery(this).fadeIn();
}
});
});

Working fiddle
If you have just three you could use :
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
var li = jQuery(".event-holder");
jQuery("#allevents").on('click', function(e){
e.preventDefault();
li.eq(i+1).fadeIn();
li.eq(i+2).fadeIn();
li.eq(i+3).fadeIn();
i+=3;
if ( i == numbofelem ) { jQuery(this).hide(); }
});
If you have several lis to show you could use a loop, e.g :
var step = 10; //Define it outside of the event
for(var j=0;j<step;j++){
li.eq(i+j).fadeIn();
}
i+=step;
Hope this helps.

You eq(i) needs to be looped.
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
jQuery("#allevents").on('click', function(e){
e.preventDefault();
//i+=3;
//jQuery(".event-holder").eq(i).fadeIn();//You are showing only the third element. Loop this
//Something like this
for(var j=i;j<i+3;j++){
jQuery(".event-holder").eq(i).fadeIn();
if ( i == numbofelem ) { jQuery(this).hide(); }
}
i = j;
});

An alternative approach would be to buffer all the items, and keep adding them until empty:
var holders = $('.event-holder').hide();
$("#allevents").click( function(e){
e.preventDefault();
holders = holders.not(holders.slice(0, 3).fadeIn());
if(holders.length === 0) $(this).hide();
});
Fiddle

each <p> is added in all .content divs and not only in one

I have two divs .content.
And I have a button "add" to add paragraphs to .content divs.
I want to have a maximum of 3 paragraphs in each .content div, when this two .content divs already have 3 paragraphs I want to create a new .content div and add there the new paragraph.
But its not working properly, when I add a new paragraph to .content div, the paragraph is added in all .content divs, and I just want to add a paragraph in one div to in all.
Do you see how to do this correctly?
$(document).on('click', '#input', function () {
$('#input').val('');
});
$(document).on('click', '#add', function () {
var input = $("#input").val();
alert(input);
var divContentSize = $(".container > *").length;
alert(divContentSize);
var relDiv = $(".container > div").filter(function () {
return $(this).children().length !== 3;
});
if (relDiv.length) {
relDiv.prepend("<p>" + input + "</p>");
}
else {
$(".container").append("<div class=content><p>" + input + "</p></div>");
}
});
$(".prev").click(function(){
if ($(".container .content:visible").next().length != 0)
$(".container .content:visible").fadeOut(function(){
$(this).next().fadeIn();
});
else {
$(".container .content:visible").fadeOut(function(){
$(".container .content:first").fadeIn();
});
}
return false;
});
$(".next").click(function(){
if ($(".container .content:visible").prev().length != 0) {
$(".container .content:visible").fadeOut(function(){
$(this).prev().fadeIn();
});}
else {
$(".container .content:visible").fadeOut(function(){
$(".container .content:last").fadeIn();
});
}
return false;
});

You can have a look at this fiddle to see if it accomplishes all that you want. I stripped down your fiddle just to show the functionality and also make browsing the code for the specific problem easier.
Fiddle
I basically used jquery to traverse the elements and decide what goes where on your click event:
$(document).ready(function(){
$("#add").click(function(){
//get last child of class content of container
var children = $(".container").children(".content");
//add new content if none exist
if(children.length <= 0 || $(children[children.length-1]).children("p").length == 3){
var div = $("<div class='content'/>");
$(".container").append(div);
}
//refresh children
children = $(".container").children(".content");
$(children[children.length - 1]).append("<p>Newly added</p>");
});
});
UPDATE: Just updated the fiddle so its easier to see the separation of the divs and p tags that are being added to the DOM
New Fiddle : Fiddle
UPDATE: Updated the fiddle to run with the two div content as stated in comment.
Updated Fiddle
Matches code below:
function addP2div(div){
$(div).append("<p>Newly added</p>");
}
$(document).ready(function(){
$("#add").click(function(){
//get children of class content of container
var children = $(".container").children(".content");
//set variable to see if added
var added = false;
//add new content if none exist
if(children.length > 1){
//check each child to see if it can accept a third p
for(i=0;i<children.length;i++){
var elem = children[i];
//skip if 3 p exist
if($(elem).children("p").length == 3){
continue;
}
//add p here
addP2div(elem);
added = true;
break;
}
}
//create new div and add to it
if(!added){
var div = $("<div class='content'/>");
$(".container").append(div);
addP2div($(".container").children('.content').last());
}
});
});

Jquery: hiding empty table rows

I am trying to write a script that detects if a tables tds are empty and if they are hide the parent tr
I've searched Stack Overflow and found other scripts but none seem to work for me.
So far I have:
$(".table tr").each(function() {
var cell = $(this).find('td').html();
if (cell == null){
console.log('empty');
$(this).parent().addClass('nodisplay');
}
});
but just can't get it working. Any advice would be appreciated!
Fiddle: http://jsfiddle.net/MeltingDog/S8CUa/1/

Try this -
$("table tr td").each(function() {
var cell = $(this);
if ($(cell).text().length == 0){
console.log('empty');
$(this).parent().addClass('nodisplay');
}
});
Demo

you should try this.
jQuery(document).ready(function(e) {
jQuery(jQuery('table tr td:empty').parents('tr')).addClass('nodisplay');
});

.html() only returns the content of the first matched element, so if your rows have more than one cell this wouldn't work. .text() might be a better fix, unless you have images or other empty tags in the cells.
$("table tr").each(function() {
var cell = $.trim($(this).find('td').text());
if (cell.length == 0){
console.log('empty');
$(this).addClass('nodisplay');
}
});
DEMO

It seems you want to hide rows that have only whitespace content (but the cells might have other element child nodes). Using plain javascript:
var rows = document.getElementsByTagName('tr');
var i = rows.length;
while (i--) {
if ( !trim(getText(rows[i])) ) {
rows[i].className += ' nodisplay';
}
}
Helpers:
function trim(s) {
return s.replace(/(^\s*)|(\s*$)/g, '');
}
function getText(el) {
if (typeof el.textContent == 'string') {
return el.textContent;
} else if (typeof el.innerText == 'string') {
return el.innerText;
}
}

$('table tr').each(function(){
var hide = true;
$('td',this).each(function(){
if ($.trim($(this).text()) != "")
hide = false;
});
if(hide)
$(this).closest('tr').hide();
// OR $(this).closest('tr).addClass('nodisplay');
});

Hide table, if table have no rows using jquery
$('.tblClass').each(function(){
if($(this).find('.rows').length == 0){
$(this).hide();
}
});