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.
Related
Goal:
When I have the cursor inside of a td row, some icon should appear, and you should enable to click them. The icons contain link.
When you have the cursor in a new td row, the previous td row should be default and the new td row should have the new icon.
Pleae take a look at the picture.
Problem:
I don't know how to create it.
Information:
I'm using bootstrap, jquery and Visual Studio.
You can place all the icons when you are creating the rows. just give the style
style='display:none;'
then loop thorugh the rows via jquery
$(table tr).each(function () {
if ($(this).is(':hover'))
$('icondiv').show();
else
$(this).hide();
});
Then if you want to perform some action based on the click on those icons, then you can place an data-* attribute along with those icons and track that particular row.
From jquery you can fetch the data attributes using data() function like
$('icondiv').data('id');
First way just use css
in html add class to div which include icons
<div class="IconsDiv">
<!-- Icons here -->
</div>
and in css
.IconsDiv{
display: none;
}
tr:hover .IconsDiv{
display: block;
}
another way : if you want to use jquery for that
$(document).ready(function(){
$('table tr').hover(function(){
$(this).find('.IconsDiv').show();
},function(){
$(this).find('.IconsDiv').hide();
});
});
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 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.
I want to use a toggle button next to a table to hide or show table rows based on the whether or not a checkbox in the last column of the table is checked.
Here is the code for the table:
<table>
<tr>
<td>1<td>
<td>Text<td>
<td><input type="checkbox" class="form-checkbox" checked="checked"><td>
</tr>
<tr>
<td>2<td>
<td>Text<td>
<td><input type="checkbox" class="form-checkbox"><td>
</tr>
</table>
In the sidebar I have this button:
<a id="comtoggle" class="btn" href="#">Toggle</a>
In the above example, I would like for row 1 to disappear if the Toggle button is clicked, but have it reappear if the toggle button is clicked again. The state of the checkbox is stored in a database and is saved via an AJAX function (which works fine).
Here is the jQuery I have. I think my problem is using the .is(':checked') in the 3rd line.
$("#comtoggle").click(function() {
if ($('.form-checkbox').is(':checked')) {
$('.form-checkbox').is(':checked').closest('tr').toggle();
}
});
With this snippet, all of my rows disappear, and the console of Firebug shows this error:
TypeError: $target.offset(...) is null
Not sure if it is related.
I suppose this is what you mean. Catch the fiddle aswell: http://jsfiddle.net/7C423/1
All you need to do is just grab that what you are interested in and play the ball.
$("#comtoggle").click(function() {
$(".form-checkbox:checked").closest("tr").toggle();
});
Since you are selecting elements by class, you need to loop trough them and in case they are checked hide a row.
$("#comtoggle").click(function() {
$('.form-checkbox').each(function(chk){
if($(this).is(':checked'))
$(this).closest("tr").toggle();
});
});
I have a html table displayed in a showmodal dialog window, the html-body has several divs, each div having several tables, tr and td within them.
The user will update entries within the input tag so i need to capture the change.
One such div looks like below. How to I retrieve all these values on a button click. I have heard of serialize() method. Will it work for all tag types, "insert","select", "option" etc etc.
<div>
<table>
<tr><td></td><td></td><td></td>
</tr>
</table>
<table>
<tr><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td>
</tr>
</table>
<table>
<tr><td></td>
</tr>
</table>
</div>
Apologies, writing my solution in a pseudocode fashion:
//I created a div container and then loop through all the divs
//then retrieve values using one of the below
$("classname > div[id]").each(function(){
var a= document.getElementsByName("name of the tag"); //by name
var b= document.getElementById("id of the tag"); //by id
var c= $("input[class='"+trd_id+"']:checked").val(); // for radio button
});
// loop by div counts and alert the values. Solved my problems