Develop Reference

Show/Hide specific rows in table when link is clicked

I have a table which contains categories of info on each row and many rows may have the same category.
I have a menu of all the categories (a very simple vertical text menu in a div).
<div class="menu">
Category 1
Category 2
Category 3
</div>
<table border="1">
<tr id="cat1">
<td>some info</td>
</tr>
<tr id="cat2">
<td>blah blah</td>
</tr>
<tr id="cat1">
<td>more blah</td>
</tr>
</table>
When I click on a specific category link in that menu I want it to only show the rows that match that category in the table.
I'm new to Javascript, etc so still learning. I've searched on Google but can only find examples that seem to hide/show 1 row or something similar but not what I need it to do. I can't work out if it's possible to do what I described above. Any help will be much appreciated!

Issues in your code
You need to identify your table rows by category.
Using id to assign a category to multiple rows is wrong (Duplicate ID values is invalid HTML).
You can use class, but personally I prefer to attributes since that value is meant to use within JS and not styling.
The default behavior of anchors is to redirect, refresh (or move the scrollbar), to make it short this isn't the element you need to use. I will replace it with a button.
A solution
// Selecting all the filters (buttons)
document.querySelectorAll('[catFilter]').forEach((el)=>{
//console.log(el);
// Listenning to clicks on the filters
el.addEventListener('click', (ev)=>{
// Selecting all the table rows when the click happens
// This will happen everytime you click!
document.querySelectorAll('table tr').forEach((row)=>{
//console.log(row);
if(ev.target.value === "*"){
// Show all
row.classList.remove('hidden');
}else if(row.hasAttribute(ev.target.value)){
// Make sure that the filtered rows are shown
row.classList.remove('hidden');
}else{
// Hide everything else
row.classList.add('hidden');
}
})
})
})
.hidden {
display: none;
}
<button value="cat1" catFilter>cat1</button>
<button value="cat2" catFilter>cat2</button>
<button value="*" catFilter>All categories</button>
<table border="1">
<tr cat1>
<td>some info</td>
</tr>
<tr cat2>
<td>blah blah</td>
</tr>
<tr cat1>
<td>more blah</td>
</tr>
</table>

Column toggle not working when append the table rows dynamically

In jQuery mobile v 1.4.5 i used table rows append dynamically with column toggle but it does not work for the rows which are dynamically generated.
<table id="tab" data-role="table" data-mode="columntoggle" class="ui-responsive">
<tbody id="tb" >
<thead id="th">
<tr id="tr1">
<th>First</th>
<th data-priority="1">Second</th>
<th data-priority="2">third</th>
</tr>
</thead>
</tbody>
</table>
Here is the Fiddle what I tried.
I referred this jQuery mobile document.
Note: I want to insert the table rows at the top of the previous rows (dynamically added rows that why I used "after" property).

Edited:
New link is the below to locate created new row on the top of the table
http://jsfiddle.net/txej8qhj/6/
The below link works fine;
http://jsfiddle.net/txej8qhj/3/
Probably you too know. Sometimes we may overlook somethings. You should separate the thead and tbody element. Actually thead element first comes in a table like the below;
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Check the below link out to use as guide;
http://demos.jquerymobile.com/1.4.5/table-column-toggle/#&ui-state=dialog

You need to call refresh and trigger create functions on the table element.
Please, try the below:
$("#tr1").after(newrow);
$('#tab').table("refresh").trigger("create");

Drop Down Content/Table and Page Jumping

I am coding a page with several dynamic/sortable tables in it (one below another) to share PDF documents. Each Document tittle in the table contain a link to open the PDF in a new tab. Everything works fine, BUT when I scroll down the page and open a dynamic table/or minimize the table, the page jumps to top of the page/to default position. JavaScript's RETURN FALSE fixes this problem but all the links in the table are dead. Can anyone help to fix this? I attach the basic code structure here you can see what I am doing...
HTML:
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1>
<div>
<table class="sortable" width="100%" border="0">
<tr>
<td id="tablehead" width="55%">Sort by tittle</td>
<td id="tablehead" width="25%">Sort by Author</td>
<td id="tablehead" width="25%">Sort by date</td>
</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document1.pdf" target="_blank">Document1Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document2.pdf" target="_blank">Document2Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document3.pdf" target="_blank">Document3Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX<a></td>
</tr>
</table>
</div>
</li>
</ul>
</div>
JAVASCRIPT:
// Dropdown Table Code
$(function(){
$('#droptable li a').each(function(){
$(this).click(function(){
$(this).siblings('div').slideToggle(300); // If I add RETURN FALSE here the page doesn't jump to the default position/to the top of the page (when open or minimize the table) BUT links in the table are out and don't work anymore //
});
});
});

2 things
1st id's should be unique, so change all instances of
id="tabledata"
to
class="tabledata"
2nd, try to give you td's that contain the link a different class than those that have data, then attach slide toggle to that class, maybe like:
$('.newclass').each(function(){
.....

I didn't succeed with the hints you gave but thanks anyway! I did everything but page was still jumping when opening/closing the table. BUT...I was browsing different forums and found this simple answer.
Using "#/" instead of "#" and the page won't jump. Hmm.. sometimes the answer is too simple, seemingly :o
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1> ...
Rock'nRoll!

Create a table inside of tr tag?

I have an html table, <tbody> of it is generated with angular ng-repeat. Here is my html:
<tbody>
<tr ng-repeat-start="car in carList | filter:tableFilter" ng-click="activeRow = car.name">
<td><a target="_blank" href="{{car.carLink}}">{{car.name}}</a></td>
<td>{{car.review}}</td>
<td>{{car.rating}}</td>
<td>{{car.fiveStarPercent}}</td>
<td>{{car.recommended}}</td>
<td>{{car.price}}</td>
</tr>
<tr ng-repeat-end ng-show="activeRow==car.name">
<td>{{car.name}}</td>
</tr>
</tbody>
I want to replace <td>{{car.name}}</td> with the table that will show only when you click on some row.
But if I just go and replace <td>{{car.name}}</td> on the table I need, my main table will no longer create extra rows when you click.
So, is it possible to put a table inside of a <tr> tag? If yes, then what is the right way to do it?

Use colspan and rowspan for this purpose https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td

You may try to do it like this:
<table><tr><td>...</td></tr></table>
ie, you can add a full table inside the td
JSFIDDLE DEMO

Iterating through table rows in nested divs

I have a page that contains a couple of layers of nested div tags. Within the the 8 or 9 of the divs are tables. How do I iterate through the divs and pick the specific divs that I want and then iterate through the cells in the table (one row) embedded in each of the divs? Here is a representative sample of the page that I want to iterate through.
<div id="TheHouseDiv" class="catbox_m">
<div class="Room1Div">
<table width="900" border="0">
<tbody>
<tr>
<td>I don't care about this value</td>
<td>I WANT THIS VALUE 1!</td>
<td>I WANT THIS VALUE TOO 2!</td>
<td>Another cell I don't want</td>
<td>THIS CELL I WANT ALSO</td>
<tr>
</tbody>
</table>
<table width="900" border="0">
<tbody>
<tr>
<td>Ignore this value in the second table</td>
<td>I WANT THIS VALUE</td>
<td>I WANT THIS VALUE TOO</td>
<td>Ignore this content</td>
<td>GET THIS CELL VALUE</td>
<tr>
</tbody>
</table>
</div>
<div class="Room2Div">
<table width="900" border="0">
<tbody>
<tr>
<td>I don't care about this value</td>
<td>I WANT THIS VALUE 1!</td>
<td>I WANT THIS VALUE TOO 2!</td>
<td>Another cell I don't want</td>
...
You get the idea. So there is one table within each div and multiple divs. There are actually between 8 and 10 divs. None of the tables or cells have IDs so I need to reference the positionally. However I don't want all of the cell nor all of the tables. I only want values from specific cells in each of the tables within each div although I want the same cells from every table. Would I iterate through this or just reference the specific cells I want and if so, how do I select them?

This gives you all the tds which you want. (if you don't understand the selector just post a comment and I will explain it.
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4))")
e.g. to loop over the hrefs of the <a> tags inside these tds
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4)) a")
.each(function(i, ele) {
alert(ele.href);
}
);
e.g. to loop over the text of the <a> tags inside these tds
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4)) a")
.each(function(i, ele) {
alert($(ele).text()); //or ele.innerHTML if no nasty is in the <a> tags
}
);

$('#TheHouseDiv div').eq(1).find('table').eq(2).find('tr').eq(3).find('td').eq(4).text()
A bit verbose, but I believe this retrieves the text of the 4th <td> inside the 3rd <tr> of the 2nd <table> from the first <div> contained in #TheHouseDiv.
You can also use the shortcut .find('tr:first') to match the first one.