I have a few divs on a page each containing one table.
A user interacts with the table and hides some rows.
I want to hide the containing div if all the table rows in the containing table are hidden.
How can I do this in jQuery?
.div.mytable
table
tr
.div.mytable
table
tr
Demo
This hides the row you want to hide and hides it's parent div if all rows are hidden.
JS
$('.hide').click(function(){
// This hides the nearest <tr>
$(this).closest('tr').hide();
// Number of <tr> of it's <table>
var tableTrNumber = $(this).closest('table').find('tr').length;
// Number of <tr> already hidden of it's <table>
var tableTrHiddenNumber = $(this).closest('table').find('tr:hidden').length;
// If my tr number are equal to the number of hidden tr then hide the div
if(tableTrNumber == tableTrHiddenNumber)
{
$(this).closest('.mytable').hide();
}
});
Every style and HTML structure is just to show you how it works. Feel free to adapt it to your needs. Of course you've to respect the hierarchy of elements.
If you don't like the hide() function you can put whatever effect you want like a fade or accordion.
Hope this helps you.
You can target the containing div or put a class on each of the containing divs
<div class="containerDiv">
<table>
</table>
</div>
Use the simple jQuery .has() method
if($(".containerDiv table").has("tr")){
$(this).parent(".containerDiv").hide();
}
Wrap it in a function and call the function when ever the interaction happens.
Related
can any body please help how to hide a particular column in particular row in a grid using jquery. i am able to hide.
i tried with below code to hide a column.
var orderSection=getSelectedGridValue("egwEnterAppealDetails","ddwOrderSection");
if(orderSection!=""){
eval("$('[id*=ddwOrderSection]:input').attr('disabled','disabled')");
}
but in that case it is hiding that particular column in all rows but i don't want that.
i am not using any jquery grid table i my js.
i hope i am clear with my query please help me out. and please give some useful reference to how to work with jquery grid.
Use the nth-child pseudo-selector. It chooses the nth-child for every table row, thereby hiding the whole column
var n = 2; column number you want to hide
$('#myTable tr td:nth-child('+n+')').hide()
Or
$('#myTable tr td:nth-child(2)').hide();
You can use eq(elementIndex) to hide particular column from table
$('#tblExample tr td:eq(Index)').hide();
OR
$('#tblExample tr td:eq(Index)').css('display','none');
Example
$('#tblExample tr td:eq(1)').hide();
This will hide 2nd td from all rows within table "tblExample"
If we want to hide the particular column use the below code:
$("#gridid").jqGrid('hideCol', "columnname");
Note:When we hide the column in header row,it will be applicable to all the rows for that particular column.
I have a little problem with finding cell's id (and its content). Main table contains multiple divisions and each division contains one table with several cells. What I want is to display cell with id content_xx. My tables look like this:
<table id="MainTable"> // Main (global) table
<div id="divid_1"> // First div in main table
<table id="InfoTable"> // First div's table
<td id="title_10">CellTitle</td> // Cell #1
<td id="content_11">CellContent</td> // Cell #2
<div id="divid_2"> // Second div in main table
<table id="InfoTable"> // Second div's table
<td id="title_20">CellTitle</td> // Cell #1
<td id="content_21">CellContent</td> // Cell #2
// etc...
</table>
Function for finding it:
function FindContent(id)
{
t = document.getElementById("InfoTable").rows[0].cells.namedItem("content_"+id).innerHTML;
alert(t);
return;
}
I have onclick event which executes this function. It works for me only for first InfoTable, but it does not work when I try same thing on table #2 or further. I get this error: TypeError: document.getElementById(...).rows[0].cells.namedItem(...) is null. How can I fix this and why it does not work? Is it because of row[0]? If I change to row[1], for example, then it doesn't work at all. I can change structure of html but not completely.
** Solved by icecub **
The problem was that I was using same ID in divs, therefore, only first table would have been returned. I just needed to use different ID.
I have a table in which any time a user clicks on one of the rows it highlights the row. However as of if I have multiple rows highlighted i have to click each individual highlighted row to get rid of the highlight. I want to make it so when an individual is not clicking on the table it will get rid of the highlight on all the rows. This is the code that I am using.
//this highlights the table that has been clicked on
$('.tr_highlight').live('click',(function () {
$(this).parent().toggleClass("tr_highlight_ed");
}));
How do I get it to unhighlight(if thats a word) when clicking anywhere but the table?
You really need to post an example of the rendered markup. You don't want to do a toggleClass, you would do a removeClass selecting the parent nodes...
Assuming the following markup...
<body>
...
<table id="myTable">...</table>
...
</body>
You could bind the following..
$('body').click(function(evt){
//evt.target is what was clicked on, which bubbles up to body
//if it's anything inside #myTable, you will get the #myTable
var el = $(evt.target).closest('#myTable');
//if you didn't get #myTable, you clicked outside the table
//remove the given class from all the tr's
if (!el.length) $('#myTable .tr_highlight_ed').removeClass('tr_highlight_ed');
});
$(document).bind('click.table', function (e) {
if ( $("#my-table").has(e.target).length === 0 ) {
$("#my-table").find("tr").removeClass('tr_highlight_ed');
}
});
Everytime a user clicks anywhere on the page, it will check if the element that was clicked is inside the table; if not, we unhighlight all the rows.
is there a way to group tr's in a table so when you hover over lets say five of them the hover function is fired?
I can do this individually but I would like 5 rows to act as one group. So anywhere in that 5 rows the hover is in affect. When you hover out it goes away.
I am currently using this for individual rows.
$('#second_step tr').hover(function(){
$(this).css('background','#eff0ef');
},function(){
$(this).css('background','#fff');
});
You should group each set of 5 rows in a separate <tbody>, then apply the hover effect to the <tbody>s.
$('#second_step tr.particular').hover(function(){
$(this).css('background','#eff0ef');
},function(){
$(this).css('background','#fff');
});
You can assign a class to the ones you want to be highlighted on hover and attach the event to that.
you can group rows in <tbody /> tags. according to the spec a table can contain "zero or more tbody elements"
$('#second_step tbody').hover(function() {
$(this).children().css('background','#eff0ef');
},function(){
$(this).children().css('background','#fff');
});
I'm submitting a HTML form to a Python script that generates results in HTML table. However, when the table is displayed in the page I want some columns to be in collapsed state, so I could expand them with a checkbox, like so:
$(document).ready(function(){
$(".collapse").hide();
$("#checkme").click(function(){
if($("#checkme").is(":checked")){
$(".collapse").show();
}else{
$(".collapse").hide();
}
});
});
The trouble is, table expends to all the columns when it's initially being loaded and then defaults to collapsed state (ie, the columns are hidden). How can I have a "Loading..." text displayed until the table is completely loaded with some of its columns collapsed?
Many thanks in advance.
Set table visibility hidden initially, and when the DOM is ready do this
$(document).ready(function(){ $("table.mygrid").show();});
you can actually simply define this in CSS:
.collapse {
display:none;
}
When you generate your markup, place a class on each table cell in the columns you wish to hide such as 'hideable-cell'. On the table, add a class called 'table-hide-hideable-cells'.
<table id="the-table" class="table-hide-hideable-cells">
<tr>
<td>Name</td>
<td class="hideable-cell">Hide me</td>
</tr>
</table>
In CSS:
table.table-hide-hideable-cells .hideable-cell {display: none}
Now when the table is rendered, those cells will be hidden by default. To show them, just remove the 'table-hide-hideable-cells' class from the table.
$(document).delegate('#checkme', 'click', function() {
$('#the-table').toggleClass('table-hide-hideable-cells'), !$(this).is(':checked'));
});
I use this technique frequently, whereby a single selector on a parent element can control the styling of a collection of child elements.