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>

datatable js DOM elements positioning issue

I have a small formatting issue. It can be because I don't fully understand the data tables formatting.
HTML code
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
<h1 class="page-header">Test Runs</h1>
<div class="table-responsive">
<table class="table table-striped" id="tests">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
</tbody>
</table>
</div>
The outer div is present because i have a side menu bar which is not shown here.
JS code
$(document).ready(function() {
$('#tests').DataTable( {
dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-3'i><'col-sm-6 text-center'B><'col-sm-3'p>>"
} );
} );
In the above js code, if I don't add "dom" element the filter results and search bar are not in the same row , they are one below the other.
The same applies to information and pagination.
I want the four elements to be in four corners of the screen.
eg:
length changing input control : top left
filtering input : top right
table information summary : bottom left
pagination control : bottom right.
With the current code (with the "dom" added) I am able to achieve this but now there is a horizontal scroll which I don't want.
Can someone tell me what mistake I made.

You can place the relevant elements in the bootstrap panel.
$(document).ready(function() {
var table = $('#example').DataTable({
"dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
}); });
Demo : http://jsfiddle.net/a62hqqf9/
You can also look again for the use of DOM elements : datatable dom

The main reason for horizontal scroll is negative margins of .row. You need to remove negative margins with custom class. I have added .no-gutters in the snippet example as you are probably using Bootstrap 3. If you are using Bootstrap 4, the class comes with Bootstrap CSS.
Demo: Working example

How to set minimum width in resizable table?

I made a resizing table using Jquery resizable. Now, i am facing a problem in it. The goal is:
I want to set a minimum width (ie.,) it will not resize beyond that width
When i resize one column, the width of another column should not change
I used minimum width for the first one, but it didnt work and i dont know what to do with the second one.
Please help me guys
Here is the link
DEMO
<table id="table-css-border-1" class="ui-widget-content">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

I had the same issue but later i made of use colResizable
colResizable is a free jQuery plugin to resize table columns dragging them manually. It is compatible with both mouse and touch devices and has some nice features such as layout persistence after page refresh or postback. It works with both percentage and pixel-based table layouts
$("#sample").colResizable({
liveDrag:true
});
I am sure your issue will be resolved using this.
Have a look at the Fiddle
for Docs about colResizable http://www.bacubacu.com/colresizable/#usage

try adding minWidth in your function
<script>
$(function() {
$("#table-css-border-1 tr th").resizable({
handles: 'e',
minWidth:100
});
});
</script>
http://api.jqueryui.com/resizable/#option-minWidth

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");

Jquery table: customize seanmacisaac table / insert tbody into div

I am trying to adjust a Jquery sort-able, searchable table set up by seanmacisaac
Ref: http://www.seanjmacisaac.com/projects/code/tablesort/#index-member-4
How do I set the tbody height to a fixed value. Also allowing vertical scroll (overflow-y)?
<table class="table-sort table-sort-search table-sort-show-search-count">
<thead>
<tr><th class="table-sort">head1</th><th class="table-sort">head2</th><th class="table-sort">head3</th></tr>
</thead>
<tbody>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
<tr><td>4-1</td><td>4-2</td><td>4-3</td></tr>
</tbody>
</table>

Just wrap the table into a div :
<div style="overflow:auto;height:500px;width:100%">
<table></table> // with any number of row
</div>
Put the css into a class and add a class to the container div

If you want to scroll only the data section of the table not with headers then you should make html like:
<div class="header-table" style="width:100%">
<table class="header"></table>
</div>
<div class="table-data" style="overflow:auto;height:500px;width:100%">
<table class="data"></table>
</div>

If you want to keep the header fixed while scrolling, for simple tables, I create a two separate tables:
the first for the header and the second in a div with fixed height and overflow-y:auto, just for the tbody.
Not that elegant but just do the job.
Don't know where this table will be but I think you should use a paginator for 100+ rows tables...
If the problem is sorting data and paginate I'd give jqGrid a chance: http://trirand.com/blog/jqgrid/jqgrid.html