We Keep Coding

Use JQuery to Unhide Table Rows

I have a table containing Employee Names. I would like to add a hidden row after each row that contained contact information for that particular employee. I would like to use JQuery to do a slideDown animation that reveals that information.
If I was using Javascript, I would do something like name the TR element with an ID such as "employee-xx" and the hidden line as "hidden-xx" where xx is the employeeid. I would do an onClick event that called a function(using the employeeid as a parameter) to hide or unhide the line. As I am just starting JQuery, I don't know how to code this elegantly. I would like to tell it "When you click a visible line in the table, slideDown the invisible line below it", but don't know how to do that. If I use the ID of the row, how do I access the ID via JQuery? I know it's probably simple, but I am stuck.
Thank you,
John

http://www.w3schools.com/jquery/jquery_traversing_siblings.asp
var clickhandler = function(e) {
$(e.target).next().show();
}
btw, this has been answered on here before.
Retrieve previous and next rows in a table using jQuery

EDIT: Fixed a derpy mistake with missing class name. Fiddle has been updated.
I think this is what you want? Clicking on a row with a name causes the hidden row underneath to slide down. Click again to retract.
HTML:
<table>
<tr class="show">
<td>Bob Robertson</td>
</tr>
<tr class="hide">
<td>
<div>(555)123-4567</div>
</td>
</tr>
<tr class="show">
<td>Richard Johnson</td>
</tr>
<tr class="hide">
<td>
<div>(000)000-0000</div>
</td>
</tr>
</table>
JS:
$('.hide').toggle().find('div').slideToggle();
$('.show').on('click', function () {
var next = $(this).next();
if (next.css('display') == 'none') {
next.toggle();
next.find('div').slideToggle();
} else {
next.find('div').slideToggle(function () {
next.toggle();
});
}
});
Here's a fiddle.

How to select the td within a table with a specific id

I have run into a problem I suspect has a very easy solution but it is stumping me. In the following code
$(document).ready(function() {
$('#btnHide').click(function() {
$('td:nth-child(1)').nextUntil(':nth-child(4)').toggle();
});
});
and the html
<table id="tableOne">
<tr>
<td></<td>
</tr>
</table>
How would I go about changing the javascript so it doesnt target all tables but just the one with the id='tableOne'?

Add that table in the selector:
$('#tableOne td:nth-child(1)').nextUntil(':nth-child(4)').toggle();

Selecting an element dynamically by cicking button in same div

I am attempting to create a script to add another row in a table with specific html content. The problem is that i'd like to use the same script on each section of a rather long form. Selecting the table id without having to do so with the exact table name seems to be escaping me.
The point here is to just hit the "add" button and it will add an additional item of whatever section that button is in. But before i can have it add I need to be able to select the correct item (the table id) without actually using "getElementById".
I've scoured for an answer and being still pretty new to web javascripting, i'm guessing i'm just not understanding something or attempting the wrong method... any assistance would be greatly appreciated.
HTML
<div id="divOne">
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
</table>
<br />
<button onclick="myFunction()">Test ONE</button>
</div>
<br />
<div id="divTwo">
<table id="testTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
</table>
<br />
<button onclick="myFunction()">Test TWO</button>
</div>
jquery
function myFunction() {
var x = event.currentTarget.parentNode.getAttribute('id');
alert(x); //to test its grabbing correct div THIS ONE WORKS
var child = x.getElementsByTagName('table').getAttribute('id');
alert(child); //to test its grabbing correct THIS ONE DOESNT
}

There are two issues need to be fixed:
According to your implementation, x is the id of the parent div (string value), you can't invoke the 'getElementsByTageName('table') on it. You should get the element reference
getElementsByTagName() will return a HTMLCollection, try to access them like this: children[index]
HTML
<div id="div1">
<table id="ans"></table>
<button onClick="test(event)">test</button>
</div>
JS
function myFunction(e){
var target = e.currentTarget.parentNode;
//fetch id
console.log(target.getAttribute("id"));
//fetch table id
console.log(target.getElementsByTagName("table")[0].getAttribute("id"));
}
Here is the jsfiddle demo

Did you already try jQuery? It has some nice methods which make life easier. You may want to choose .closest() which selects an element depending on your current context.
Also, there's no need to use the awkward getElementById anymore...

You have a bug in your myFunction. This should help: http://jsfiddle.net/2wA38/

In this case, you want to find the sibling table element; you can navigate the DOM using previousSibling until you reach the element:
function myFunction() {
var node = event.currentTarget,
x = node.parentNode.id;
console.log(x);
while (node && node.tagName != 'TABLE') {
node = node.previousSibling;
}
if (node) {
console.log(node.id);
}
}

How to show a table on click of a button in php?

I want to list files from mysql table to a webpage in php. For this i use tables so that i have more regular view. Now there are n numbers of tables on a page. This n is depending upon a mysql query. I am able to list the files on the page. But if numbers of rows in table get increased and value of n is also get increased then my page length will be very long. So i want to give a tree view to each table. Like there will be a button over each table with value '+'. when i click on it the value get change to '-' and that table should be visible.
Here what i tried
<script type="text/javascript">
$(document).ready(function(){
$(".show").html("<input type='checkbox'>");
$('.tree td').hide();
$('th ').click( function() {
$(this).parents('table').find('td').toggle();
});
});
<table width="100%" class="tree">
<tr width="20px"><th colspan="2" class="show"> </th></tr>
<tr>
<td width="50%"><b>Name</b></td>
<td width="50%"><b>Last Updated</b></td>
</tr>
while($row = $result_sql->fetch_assoc())
{
<tr>
<td width='50%'><a href='http://127.0.0.1/wordpress/?page_id=464&name_file={$row['name']}&cat={$cat}&sec={$sec}' target='_blank'>{$row['title']}</a></td>
<td width='50%'>{$row['created']}</td>
</tr>
}
</table>
This is not exact code.
as you can see i am able to do it but i am using a chackbox. i want to have a button with value + or - . There is one problem with this code. The line in which checkbox is showing if i click on it the table is expanded means it taking the entire row not only the checkbox. So anybody can help me with this?
Thanks

I know that this is a code sample, in the future try to provide a jsFiddle to make it easier for people to help. If you want to use +/-, you can make a minor modification like my example
<th colspan="2" width="100%"><span class="show"></span></th>
I basically added the show class to a span within the <th> and attached a click handler on it as well. When you click on it, it will toggle the <td> within the parent <table>... in addition, it will check the text-value in the <th> and inverse it
$('.show').click(function () {
$(this).parents('table').find('td').toggle();
$(this).text() == '+' ? $(this).text('-') : $(this).text('+');
});
Since you don't need a checkbox and you are using a <span>, it won't wrap across the entire <th>. Was this what you were looking for?

Get solution
<script type="text/javascript">
$(document).ready(function(){
$(".show").html("<input type='button' value='+' class='treebtn'>");
$('.tree td').hide();
$('.treebtn ').click( function() {
$(this).parents('table').find('th').parents('table').find('td').toggle();
if (this.value=="+") this.value = "-";
else this.value = "+";
});
});
It is working fine the way i wanted.

Display only certain columns in a table

Been searching for answers but finding none. I have a code that displays a table pulled from a server-side genqueuesearch.php based on a parameter "rg1". Each row has a column called Queue with an "rg1" string in it. The table has several columns but my challenge is displaying only 4 columns. Here is my AJAX code:
<html>
<head>
<script language="Javascript">
function View(){
...
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("datatable").innerHTML=xmlhttp.responseText;
}
}
var parameters = "search="+"rg1";
xmlhttp.open("POST", "http://drcsblr0165/genqueuesearch.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(parameters);
}
</script>
</head>
<body onload="View()">
<div id="datatable" align="center"></div>
</body>
</html>
Tried getElementsbyTagName but I don't know the tag names for the columns I would like. Does this require saving the table to a text file first? I appreciate all your help and please ask if I'm not clear.

Since you can't alter what the server is giving you, then we are restricted to solving this with JavaScript only. I do suggest you use jQuery because it'll make things much simpler for you.
jQuery utilizes CSS selector pattern for finding elements in the DOM. You can leverage it to select which columns in the table you'd like to hide. You can even select specific columns even if you don't know the name of them.
Say, you get back a table like this from the server and you've put it inside your <div id="datatable">:
<div id="datatable" align="center">
<table>
<tr>
<td>dataRow1Col1</td>
<td>dataRow1Col2</td>
<td>dataRow1Col3</td>
<td>dataRow1Col4</td>
</tr>
<tr>
<td>dataRow2Col1</td>
<td>dataRow2Col2</td>
<td>dataRow2Col3</td>
<td>dataRow2Col4</td>
</tr>
<tr>
<td>dataRow3Col1</td>
<td>dataRow3Col2</td>
<td>dataRow3Col3</td>
<td>dataRow3Col4</td>
</tr>
<tr>
<td>dataRow4Col1</td>
<td>dataRow4Col2</td>
<td>dataRow4Col3</td>
<td>dataRow4Col4</td>
</tr>
</table>
</div>
For example, using the :nth-child selector doesn't require you to know the class name, $('#datatable td:nth-child(3)').hide(); will select the 3rd column and hide it. (see example: http://jsfiddle.net/Cjsua/)
You may find more suitable selectors on the jQuery documentation: http://api.jquery.com/category/selectors/
The .hide() function simply hides the elements matched.