I need help with hiding and show a table in Javascript. My javascript is very short and that is because I want to use setAttribute and getAttribut I some way to hide and show the table when clicking on the link "Hide/show".
HTML
Hide/show</p>
<table class="show" class="hide">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
</table>
CSS
.hide{
display:none;
}
.show{
display:block;
}
JAVASCRIPT
var linkhideShow = document.querySelector("#hideshow");
var show = document.querySelector(".show");
var hide = document.querySelector(".hide");
link.onclick = function() {
if (){
}
else{
}
};
Regards!
Give your table a id like this, and use only one class attribute:
<table class="table" id="table1">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
</table>
Then set your default value in the css class table or however you want to call it to display:hidden; or display:none'
And then check if your element is shown or hidden and edit the attribute like this:
var table = document.getElementById("table1");
document.getElementById('link').onclick = function() {
if(table.styl.display == "none"){
table.style.display = "block";
}else{
table.style.display = "none";
}};
Here is a working Fiddle
using jquery you can simple do it as follows
$('#linkId').click(function () {
$('#tabelId').toggle();
});
Try this way :
Hide/show</p>
<table id="table "class="show">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
</table>
<script>
document.getElementById('link').onclick = function() {
var t = document.getElementById('table');
if(t.classList.contains("show")){
t.className='hide';
}else{
t.className='show';
}};
</script>
Chagne HTML as show below
Show/Hide
<table id="table" class="show">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
In Script tag put following
function ToogleClass() {
var tableS = document.getElementById("table");
if ( tables.getAttribute("class") == "hide"){
tables.setAttribute("class","show");
}
else {
tables.setAttribute("class","hide");
}
}
To get you started (fiddle here):
<a href="#" id="link" onclick="
var elm = document.getElementsByTagName('table')[0];
elm.style.display = elm.style.display ? '' : 'none';
">Hide/show</a>
<table>
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
</table>
Edit (after your updated question):
link.onclick = function(){
var elm = document.getElementsByTagName('table')[0];
elm.style.display = elm.style.display ? '' : 'none';
}
Updated fiddle here.
Short explanation:
the ternary statement (elm.style.display = elm.style.display ? '' : 'none';) is like an if else:
variable = condition ? /*true*/ : /*false*/ ;
if(condition){variable = /*true*/;} else {variable = /*false*/;};
Normally elements have their style.display unset, so it is an empty string. Empty strings evaluate to false in javascript. So, when the style.display is 'none', then the string is not empty. Thus, when style.display is set (to none), then set it to '' otherwise set it to 'none'.
Another important note: when an element's style.display is unset, the browser will render the element in the element's default display mode. Inline elements (like span) will be inline, block elements (like div) will have block and table elements will have table (not block).
So, setting the elements style.display to '' (instead of 'block') we assure the element get's it's default display mode (also it solves some weird cross browser issues).
Naturally you could also make a toggle function this way (passing the element to toggle as an argument):
function toggle(elm){
elm.style.display = elm.style.display ? '' : 'none';
}
// example use: toggle( document.getElementsByTagName('table')[0] );
NOTE:
Your table should NOT have two class attributes like this: class="show" class="hide".
Also note: In HTML an element's class attribute can have multiple classes separated by spaces: <elm class="class_a class_b"></elm>. In order to reliably add/delete a class one would require another (somewhat heavy) function (because if you would set the full class-attribute, you'd overwrite it completely).
It would be better to give the table an unique ID and reference it via this ID.
Hope this helps!
Related
I'm currently trying to replace my old method of using table with div and which I'm accomplishing successfully but I'm stuck in a problem. The situation is that in my table method I'm hiding some of my <tr style="display:none;"> which are not required by using some java-script functions and display when it is required.
Now I'm converting my tables rows and column by div and the method which I'm using to show only works for table.When the .php page is open I'm passing arguments in url for example localhost/royaltrade/user_access.php?rptType=UserLog and getting it by using $_REQUEST['rptType'] method after this <body onload="funControls();"> calling function which use that case and switch to a function called funControls() and select the case and execute its line.How Can I hide and show my div ? ?? ?
Here is my javascript code
function funControls()
{
<?
switch($_REQUEST['rptType'])
{
case 'UserLog':
echo "showRows('table','CompName');";
echo "showRows('table','UserName');";
echo "showRows('table','StartingDate');";
echo "showRows('table','EndingDate');";
$title='User Log';
$path="browser_reports/rptUserLog.php";
$selected='UserLog';
break;
}
?>
}
Here is the problem in that function can't use rows[rowId] Function for div
function showRows(tableId,rowId){
var hide= true;
var t = document.getElementById(tableId);
var rowStyle = (hide)? "block":"";
t.rows[rowId].style.display = rowStyle;
}
function hideRows(tableId,rowId){
var hide= true;
var t = document.getElementById(tableId);
var rowStyle = (hide)? "none":"";
t.rows[rowId].style.display = rowStyle;
}
Here is my body tag which calls the function onload
<body onLoad="funControls();" >
Here is my HTML working
<table id="table" cellpadding="0" cellspacing="0" border="0" align="center">
<tr height="35" id="CompName" style="display:none">
<td width="150">Select Company:</td>
<td width="200">
<select class="textbox" name="cboCompName" style="width:178px" id ="cboCompName">
<option value="-1"> Select </option>
</td>
</tr>
</table>
Here is the JS Fiddle working with table
Here is the JS FIDDLE working with div in which I want to acheive this methodology
Change your showRows function to
function showRows( rowId )
{
document.getElementById(rowId).style.display = "block";
}
Since you are already passing the rowId, no need to pass the tableId as well since ids are unique in the entire page.
Check this fiddle for a demo.
Found a few posts about this but none answered my question properly.
I want to access some values in my table and change them using a click function in js using jquery. How can I access this and change it without using innerHTML?
<table class="tg">
<tr>
<th class="tg-031e">Race</th>
<th class="tg-031e">space holder lol</th>
</tr>
</table>
var tableArray = $("table").children().children();
$("#input img.Majin").click(function() {
//tableArray[0].innerHTML = "";
});
Use following find function :
$("table").find('classname');
I need some help for doing a menu built automatically with jQuery.
I have the following HTML structure
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="20">Descripción</td>
</tr>
<tr>
<td height="20">Preguntas Frecuentes</td>
</tr>
<tr>
<td height="20">Incompatibilidades</td>
</tr>
</tbody>
</table>
...
<a name="descripcion"></a>
<h1>Descripcion</h1>
...
<a name="preguntas"></a>
<h1>Preguntas</h1>
In this case the anchor "incompatibilidades" doesn't exist, so what I need is to create a jQuery script which look for any "a" tag which has its corresponding link.
The result I expect is the following:
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="20">Descripción</td>
</tr>
<tr>
<td height="20">Preguntas Frecuentes</td>
</tr>
</tbody>
</table>
I'll appreciate your help!
If I understood correctly, you could do something like this:
var menu = $("#menu");
$("a").each(function() {
var $this = $(this);
var name = $this.attr("name");
if (typeof(name) !== 'undefined') {
var links = $("a[href='#"+name+"']");
var link;
if (links) {
link = links.eq(0);
}
if (link && typeof(link) !== 'undefined') {
menu.append("<tr><td><a href='#"+name+"'>"+link.text()+"</a></td></tr>");
}
}
});
You have to add "menu" id in a new table to create what you expect.
If you would like to remove the the table row which contains the mentioned anchor tag which does not exist, you could use:
$(document).ready(function() {
$('a[href="#incompatibilidades"]').closest('tr').remove(); // Or detach, possibly
});
If you would like to add in an h1 + a and append it to your DOM, you could use:
$(document).ready(function() {
var anchor = $('<a></a>', { 'name' : 'incompatibilidades' });
var h1 = $('<h1></h1>', { text: 'incompatibilidades' });
// Append these to the DOM here.
});
First, you shouldn't be using named anchors, but ids instead (the "name attribute on the a element is obsolete1"), to give:
<h1 id="descripcion">Descripcion</h1>
...
<h1 id="preguntas">Preguntas</h1>
Also, using a <table> element to present a list is a little non-semantic, since it's non-tabular information; instead use an ordered list, <ol>. So, with that in mind, I'd suggest the following jQuery:
$('h1[id]').each(function() {
var target = this.id;
$('#toc').append(function() {
return '<li>' + target + '</li>';
});
});
#toc {
text-transform: capitalize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="toc"></ol>
<h1 id="descripcion">Descripcion</h1>
...
<h1 id="preguntas">Preguntas</h1>
This approach is based on an assumption that you want to build a table of contents to link to those elements that are on the page.
Notes:
http://www.w3.org/TR/html-markup/a.html#a-constraints.
Without testing, and if I get your question correct - you are looking for something like this:
$().ready(function() {
// scan all links in your menu
$('table').find('a').each(function() {
// grep href attribute
var target = $(this).attr('href');
// element does not exist?
if(! $(target).length) {
// remove parent row
$(this).closest('tr').remove();
}
});
});
And - as #David Thomas mentioned correctly, you shouldn't be using named anchors, but ids instead - if you do so, you can use the anchor ('#xyz') directly as id selector as I did in the function above.
I have an html table, and when I click on any row new table shows with more specific information about some row data. I am using ng-click, ng-repeat and ng-show. Here is what I am trying to achieve: I want to do so, when I click on some row, the table shows and when I click on the same row again the table hides and also when some row is active, if you click on another row the first table hides and the new shows. Here is my html:
<tbody>
<tr ng-repeat-start="car in carList | filter:tableFilter" ng-click="modelRow.activeRow = car.name; car.showDetails = !car.showDetails">
....
</tr>
<tr ng-repeat-end ng-show="modelRow.activeRow==car.name && car.allReviews.length!=0 && car.showDetails" class="hidden-table">
<td colspan="6">
<table class="table table-striped table-bordered table-condensed table-hover">
<tbody ng-repeat="rev in car.allReviews">
....
</tbody>
</table>
</td>
</tr>
</tbody>
Here is my controller:
carApp.controller("TableBodyCtrl", function($scope){
$scope.modelRow = { activeRow: '' };
$scope.carList = [{"name":"Ford Focus hatchback",...,"showDetails":false}...];
And initially my "showDetails" in every object in my $scope.carList array is set to false.
Then as you can see in my html I do ng-click="modelRow.activeRow = car.name; car.showDetails = !car.showDetails".
It works fine, but when I click, for example, on "Volkswagen Golf" row then on "Ford Focus hatchback" and then again on "Volkswagen Golf" row, the table would not show up.
It is happening because when I click a bit on any rows "showDetails" values in $scope.carList array are set to true not false value.
How can I fix this issue or what the alternative way to achieve my goal?
Note: also I need a solution that will not slow my website, (my $scope.carList array have hundreds of cars)
make 'showDetails' a global variable not related to car.
make function for ng-click="func(car)".
$scope.func = function(car) {
if (!$scope.showDetails) {// open info
$scope.showDetails = true;
} else if ($scope.modelRow.activeRow = car.name && $scope.showDetails) {
// info was opened for, closing
$scope.showDetails = false;
} else { //info was opened, we open new one
$scope.showDetails = true;
}
$scope.modelRow.activeRow = car.name;
}
Here is a sample table.
<table class="table table-bordered">
<tbody>
<tr>
<tr>
<td>Stuff<div id="ParentID" style="display:none">145689</div></td>
<td><button class="btn btn-small">Send</button></td>
</tr>
</tbody>
</table>
I want to select the text within the div tag where id=ParentID that is closest to that button clicked. I will have multiple row in the future so it has to be unique to that row.
I have right now
var qry = $(this).closest('#ParentID').text();
Doesn't work obviously
This is how it can be done:
$(".btn").on("click", function() {
var text = $(this).closest("tr").find("div").text();
// ...
});
Note that elements should have unique IDs, so there can't be several <div> elements with ID "ParentID". I hope you use it as example only.
try this
$(".btn").on("click", function() {
$(this).parent('tr').find('div#ParentID').text();
});
$('button').click(function(){
var dataYouWant = $(this).parent().find('div').html();
});
You could do this, which gives the result:
$('.btn').click(function() {
alert($(this).parent().prev().children('div').text());
});
Try it out here: http://jsfiddle.net/YLcjf/2/
(I guess you should benchmark all these solutions. Not sure if 'find' has some greedy algortithm penalty associated with it)
$("button").click(function(){
alert($(this).parents("tr")
.find("div#ParentID").text());
});
JS Fiddle to test: http://jsfiddle.net/leniel/suRfG/